قائمة عمودية مع أيقونات CSS. قائمة أفقية سريعة الاستجابة باستخدام CSS3 النقي
كما ترون، تم استخدام تلك البسيطة هنا قوائم HTMLكل ذلك من أجل عرض جميع القوائم الموجودة ضمن الروابط للانتقال إلى فئة أو أخرى. المفهوم هو أنه من الجيد تنظيم قائمة التنقل في وضع أفقي، ولكن عندما تكون متنقلة فإنها ستصبح تلقائيًا في وضع عمودي، كما هو موضح في الصور المرفقة بالمادة.
ما تم تخصيصه مبدئيًا لكل طلب، حيث يمكن للمطور نفسه التغيير إلى السمة، أو إلى تلك الأشكال الأكثر ملاءمة من الناحية الموضوعية. تم إنشاء القائمة نفسها باللون الأخضر الداكن، ويتم اختيار هذا الظل ببساطة، وهو أمر نادرًا ما يتم رؤيته. ولكن يمكن تغيير كل شيء جذريًا من خلال الانتقال إلى نمط CSS، وهناك يمكنك ضبط نمط التصميم الذي تحتاجه، والأهم من ذلك كله، أنه يتناسب تمامًا مع أساس مورد الإنترنت.
1 . هذه هي الطريقة الافتراضية أو عند الدخول إلى البوابة.
2 . نحن نشاهد بالفعل من جهاز محمول، لكننا لم نقم باستدعائه بعد ضمن القائمة.
3 . نقرنا هنا وتم عرض جميع الاستفسارات المطلوبة.
لنبدأ التثبيت:
ZORNET.RU
CSS
قسم(
العرض: 100%؛
الحد الأقصى للعرض: 1198 بكسل؛
الهامش:0px تلقائي؛
عرض:الجدول؛
الموقف:نسبي؛
}
رأس(
العرض: 100%؛
عرض:الجدول؛
لون الخلفية: #175812؛
الهامش السفلي: 50 بكسل؛
}
#كامتوكاجنبوس(
تعويم: يسار؛
حجم الخط: 25 بكسل؛
تحويل النص: أحرف كبيرة؛
اللون: #fffab2؛
وزن الخط: 600؛
الحشو: 19.8 بكسل 0 بكسل؛
}
#kamtukagnpos:تحوم (
ظل النص: 0px 0px 6px rgba(255, 250, 250, 0.67);
}
التنقل(
العرض: تلقائي؛
تعويم: صحيح؛
}
التنقل (
عرض:الجدول؛
تعويم: صحيح؛
}
نافولي(
تعويم: يسار؛
}
التنقل ul li:الطفل الأخير(
الحشو الأيمن:0px;
}
نافولي (
اللون: #e4f2ff؛
حجم الخط: 19 بكسل؛
الحشو: 24 بكسل 19 بكسل؛
العرض: كتلة مضمنة؛
ظل النص: 0 1px 0 #2e2f2e;
}
التنقل ul li a:hover (
لون الخلفية: #143a06؛
اللون: #fff9c8؛
الانتقال: كل 0.7 ثانية تخفف 0 ثانية؛
ظل النص: 0 1px 0 #282b28;
}
التنقل ul li a:hover i (
اللون: #fdf7c9؛
الانتقال: كل 0.7 ثانية تخفف 0 ثانية؛
ظل النص: 0 1px 0 #1c1d1c;
}
التنقل ul li ai (
الحشو على اليمين: 9 بكسل؛
اللون: #f4faff؛
الانتقال: كل 0.7 ثانية تخفف 0 ثانية؛
ظل النص: 0 1px 0 #202120;
}
الملاحة-menusaita ul(
عرض:الجدول؛
العرض: 24 بكسل؛
}
الملاحة-menusaita ul li(
العرض: 100%؛
الارتفاع: 3 بكسل؛
لون الخلفية:#e9f0f7;
الهامش السفلي: 4 بكسل؛
}
التنقل-menusaita ul li:الطفل الأخير(
الهامش السفلي:0px;
}
الإدخال، التسمية(
العرض: لا شيء؛
}
شاشة الوسائط فقط و (أقصى عرض: 1440 بكسل)(
قسم(
أقصى عرض: 95%؛
}
}
شاشة الوسائط فقط و (أقصى عرض: 980 بكسل)(
رأس (
الحشو: 20 بكسل 0 بكسل؛
}
#كامتوكاجنبوس(
الحشو: 0 بكسل؛
}
مدخل(
الموقف: مطلق؛
أعلى: -9999 بكسل؛
اليسار: -9999 بكسل؛
الخلفية: لا شيء؛
}
الإدخال: فوس (
الخلفية: لا شيء؛
}
ملصق(
تعويم: صحيح؛
الحشو: 8 بكسل 0 بكسل؛
عرض: كتلة مضمنة؛
المؤشر:المؤشر؛
}
الإدخال: محدد ~ التنقل (
عرض:كتلة؛
}
التنقل(
العرض: لا شيء؛
الموقف:مطلق؛
اليمين:0 بكسل؛
أعلى: 53 بكسل؛
لون الخلفية:#174810;
الحشو: 0 بكسل؛
مؤشر ض: 99؛
}
التنقل (
العرض: تلقائي؛
}
نافولي(
تعويم: لا شيء؛
الحشو: 0 بكسل؛
العرض: 100%؛
عرض:الجدول؛
}
نافولي أ(
اللون: #f7f2f2؛
حجم الخط: 15 بكسل؛
الحشو: 10 بكسل 20 بكسل؛
عرض:كتلة؛
الحد السفلي: 1px Solid rgba(204, 197, 197, 0.1);
}
ناف أول لي آي (
اللون: #f9f5d5؛
الحشو الأيمن: 13 بكسل؛
}
}
شاشة الوسائط فقط و (العرض الأقصى: 480 بكسل) (
القسم (أقصى عرض: 90%؛)
}
شاشة @media فقط و (أقصى عرض: 360 بكسل) (
التسمية (الحشو: 5px 0px؛)
#kamtukagnpos(حجم الخط: 20px;)
التنقل (الأعلى: 47 بكسل؛)
}
قبل التثبيت، من المهم إلقاء نظرة على الصفحة التجريبية وتقييم كيفية عمل كل شيء حقًا، ولكن في الواقع لا يوجد شيء من هذا القبيل، باستثناء أنه تمت إضافة تأثير إلى اسم المورد، حيث تظهر جميع العلامات عند التمرير فوقها الذهاب تحت الظل، والذي يتم عرضه أكثر إشراقا.
هذه قائمة بالروابط المؤدية إلى صفحات مختلفة على الموقع. يبدو الأمر جيدًا عندما يتم استكمال قائمة الروابط بأيقونات بدلاً من العلامات البسيطة وليس من الضروري على الإطلاق استخدام الرسومات هنا. لماذا إنشاء استعلامات قاعدة البيانات غير الضرورية؟
كود HTML
بين العلامات لىاكتب الرابط أ(# كعب مؤقت) مع عنصرين من الكتلة بالداخل فترة. في الفترة الأولى - العلامة أنامع فئة الرموز التي تم نسخ رمزها من الموقع الخط رائع. في الثانية فترة- اسم الرابط أي النص.
دراجات
دراجات نارية
الحافلات
سيارات
طائرات هليكوبتر
بعد الربط بين العلامات رأسخط الأيقونة الخط رائع- القائمة تبدو هكذا.
أنماط CSS
لتبدأ جوجل الخطسنختار خطًا جذابًا يدعم السيريلية إذا كانت القائمة الرأسية باللغة الروسية.
انسخ رمز الاتصال الخاص بالخط المحدد والصقه في الأعلى CSSملف.
@import url("https://fonts.googleapis.com/css?family=Marck+Script");
في المحدد جسماكتب اسم الخط المحدد وضبط حجمه.
جسم (
الهامش: 0;
الحشو: 0؛
عائلة الخط: "Marck Script"، sans-serif؛
حجم الخط: 20 بكسل؛
}
نضع قائمتنا بالنسبة لنافذة المتصفح، ونتراجع من الأعلى بنسبة 10% ومن اليسار بنسبة 20%. بالطبع، هذه الأرقام مأخوذة من السقف، سيكون لديك رقمك الخاص.
أول (
الموقف: مطلق؛
أعلى: 10%؛
اليسار: 20%؛
}
نصلح عرض القائمة بـ 200 بكسل.
العرض: 200 بكسل؛
لقد وصلنا إلى عناصر قائمة القائمة. إزالة العلامات من العناصر لى.
أولي (
نمط القائمة: لا شيء؛
}
نقوم بتعيين إطارات في الأعلى والأسفل تفصل عناصر القائمة عن بعضها البعض.
الحد العلوي: 1 بكسل صلب #131313؛
الحد السفلي: 1 بكسل صلب #131313؛
الهامش: -1 بكسل 0؛
لا توجد إطارات جانبية وفواصل كافية بين الرموز وأسماء الروابط.
ارسم الإطار المناسب للعلامة أ، وهو عنصر سطري، ولا يمكنك إنشاء حد حول عنصر سطري. ولذلك، فإننا نعرض العلامة أعنصر الكتلة.
أولي أ(
عرض: كتلة؛
}
يمكنك الآن ضبط الإطار وإزالة التسطير من الروابط وتحديد لون الروابط.
الحدود اليمنى: 1 بكسل صلب #131313؛
زخرفة النص: لا شيء؛
اللون: #131313؛
الإطار الأيسر لا يزال مفقودا.
العلامات فترة- كتلة العناصر التي ستحتوي على نص، لذلك فترةعرضه كعنصر كتلة مضمنة.
أولي فترة (
الموقف: نسبي؛
العرض: كتلة مضمنة؛
}
نحتاج للأول فترة، بداخله سيكون هناك رمز، قم بتعيين الأنماط التي تختلف عن الثانية فترة. لهذا الغرض الأول فترةيُشار إليه بالطبقة الزائفة - تمتد: ن-الطفل(1)وتصميمه بشكل منفصل. اضبط الإطار والعرض الأيمن والأيسر.
Ul li aspan:nth-child(1) (
العرض: 30 بكسل؛
الحد الأيسر: 1 بكسل صلب #131313؛
الحدود اليمنى: 1 بكسل صلب #131313؛
}
سيتم وضع الرموز في المنتصف مع هوامش 10 بكسل في جميع الاتجاهات.
محاذاة النص: المركز؛
الحشو: 10 بكسل؛
ستكون الأيقونات داكنة اللون، بحجم 20 بكسل، على خلفية حمراء.
اللون: #131313؛
حجم الخط: 20 بكسل؛
الخلفية: #f44336؛
في الفئة الزائفة الثانية، تحتاج فقط إلى تعيين الحقول.
Ul li aspan:nth-child(2) (
الحشو: 10 بكسل؛
}
الآن القائمة العموديةأخذت شكلها النهائي. انظر الكود بأكمله والنتيجة.
القائمة العموديةيتم ذلك على أساس قائمة نقطية أو مرقمة. افتراضيًا، يتم ترتيب جميع عناصر القائمة عموديًا، بحيث تشغل العرض الكامل لعنصر الحاوية، والذي بدوره يشغل العرض الكامل لكتلة الحاوية الخاصة به.
لا يمكن أن تحتوي عناصر القائمة على روابط فحسب، بل تحتوي أيضًا على عناوين وأيقونات وصور. باستخدام القائمة العمودية، يمكنك إنشاء تعليقات على الموقع، وقائمة الفئات، وما إلى ذلك.
1. القائمة العمودية مع الرأس
خيار تصميم أنيق بسيط. مناسبة لفئات التصميم على موقع على شبكة الإنترنت. عند تمرير مؤشر الماوس، يغير عنصر القائمة لون الارتباط.
* (حجم الصندوق: مربع الحدود؛ الهامش: 0؛). القطعة (الحشوة: 20 بكسل 30 بكسل؛ الخلفية: أبيض؛ عائلة الخط: "Roboto"، sans-serif؛ ) .عنوان القطعة (تحويل النص: أحرف كبيرة تباعد الحروف: 2 بكسل؛ حجم الخط: 16 بكسل؛ الهامش السفلي: 15 بكسل؛ الحد الأيسر: 2 بكسل صلب #b99d61؛ -اليمين: 14 بكسل؛ ) .قائمة القطعة أ (زخرفة النص: لا شيء؛ المخطط التفصيلي: لا شيء؛ العرض: كتلة؛ الحشو: 6 بكسل 0؛ تباعد الحروف: 1 بكسل؛ اللون: #444؛ الانتقال: .3s خطي؛ .القطعة - القائمة أ: التمرير (اللون: #b99d61؛)
2. القائمة العمودية بأسلوب "خريطة مترو الأنفاق"
حل مثير للاهتمام لتصميم قائمة رأسية، وهو إمكانية إضافة قوائم متداخلة. "خط المترو" هو الحد الأيسر للقائمة، ويتم إنشاء العلامات قبل كل رابط.
- عنصر القائمة
- عنصر القائمة المتداخلة
- عنصر القائمة المتداخلة
- عنصر القائمة المتداخلة
- عنصر القائمة
- عنصر القائمة
3. القائمة العمودية مع تأثيرات التمرير
ستساعد تعبئة الأيقونة والخلفية التي تظهر عند التمرير فوق عنصر القائمة في تنويع تصميم عناصر القائمة الرأسية.
.category-wrap ( الحشو: 15px؛ الخلفية: أبيض؛ العرض: 200px؛ ظل الصندوق: 2px 2px 8px rgba(0,0,0,.1); عائلة الخط: "Helvetica Neue"، Helvetica، Arial، sans -serif; ) .category-wrap h3 ( حجم الخط: 16px; اللون: rgba(0,0,0,.6); الهامش: 0 0 10px; الحشو: 0 5px; الموضع: نسبي; ) .category-wrap h3: بعد ( المحتوى: ""؛ العرض: 6 بكسل؛ الارتفاع: 6 بكسل؛ الخلفية: #80C8A0؛ الموضع: مطلق؛ اليمين: 5 بكسل؛ الأسفل: 2 بكسل؛ ظل الصندوق: -8px -8px #80C8A0، 0 -8px #80C8A0 ، -8px 0 #80C8A0 ؛ ) .category-wrap ul ( نمط القائمة: لا شيء؛ الهامش: 0؛ الحشو: 0؛ الحد العلوي: 1px Solid rgba(0,0,0,.3); ) .category- التفاف لي (الهامش: 12px 0 0 0px؛) .category-wrap a ( زخرفة النص: لا شيء؛ العرض: كتلة؛ حجم الخط: 13px؛ اللون: rgba(0,0,0,.6); الحشو: 5px الموضع: نسبي؛ الانتقال: .3s خطي؛) .category-wrap a:after (المحتوى: "\f18e"؛ عائلة الخط: FontAwesome؛ الموضع: مطلق؛ اليمين: 5px؛ اللون: أبيض؛ الانتقال: .2s خطي؛ ) .category-wrap a:hover ( الخلفية: #80C8A0؛
اللون: أبيض؛ )
4. القائمة العمودية مع الرموز
تعمل أيقونات القائمة على إنشاء رابط مرئي يكمل الوصف اللفظي لكل فئة. لعرض الرموز تحتاج إلى الاتصال . يمكنك أيضًا استخدام أي خط رمز أو أيقونات صور أخرى.
* (حجم الصندوق: صندوق الحدود؛ الهامش: 0؛). القطعة (الحشوة: 20 بكسل؛ الحد: 5 بكسل صلب #f1f1f1؛ الخلفية: #fff؛ نصف قطر الحدود: 5 بكسل؛ عائلة الخط: "Roboto"، sans- serif ؛ ) .القطعة h3 ( الهامش السفلي: 20 بكسل؛ محاذاة النص: المركز؛ حجم الخط: 24 بكسل؛ وزن الخط: عادي؛ اللون: #424949؛ ) . القطعة ul ( الهامش: 0؛ الحشو: 0؛ القائمة -النمط: لا شيء؛ العرض: 250 بكسل؛ ) .widget li (الحد السفلي: 1px صلب #eaeaea؛ الحشو السفلي: 15 بكسل؛ الهامش السفلي: 15 بكسل؛ ) .widget li: الطفل الأخير (الحدود السفلية: لا شيء؛ الهامش السفلي: 0؛ الحشو السفلي: 0) .القطعة أ (زخرفة النص: لا شيء؛ اللون: #616a6b؛ العرض: كتلة مضمنة؛) .القطعة li: قبل (عائلة الخط: FontAwesome؛ حجم الخط : 20 بكسل؛ محاذاة رأسية: أسفل؛ اللون: #dd3333؛ الهامش الأيمن: 14 بكسل؛ 2): قبل (المحتوى:"\f0d0";) .القطعة li:nth-child(3): قبل (المحتوى:"\ f0cd";) .القطعة li:nth-child(4):قبل (المحتوى:" \f028";). القطعة li:nth-child(5):قبل (المحتوى:"\f03d";)
5. القائمة العمودية مع الصور
يمكن استخدام هذا المثال لتصميم كتل تحتوي على منتجات جديدة ومنتجات مماثلة وما إلى ذلك. موقع المتجر على الانترنت.
