اليوم سوف نتعلم معًا كيفية إنشاء "قائمة CSS" شائعة الاستخدام مع رسومات ونصوص مختلطة. أولاً، قم بتحليل خصائص هذه القائمة، ثم اكتب كود HTML، وأخيرًا قم بتطبيق أنماط CSS لتحقيق التأثير النهائي.
تأثير هذا المثال:
مؤلف هذه المقالة: 52CSS.com Li Xiang إذا كنت ترغب في إعادة الطباعة، يرجى إنشاء رابط لهذا الموقع (http://www.52css.com/)، ولا يسمح لك بتغيير محتوى المقالة حسب الرغبة ، واحتفظ بنص بيان حقوق النشر هذا!
الجزء العلوي هو اسم العمود الذي أحبه 52css وأكثر، ثم يتم تقسيم الجزء السفلي إلى كتلتين، إحداهما تعرض الصور المصغرة، والأخرى تعرض الروابط النصية، وكلاهما يمكن تحقيقهما من خلال ul+li. باستخدام التحليل أعلاه، ابدأ ترميز HTML التالي:
مثال لكود المصدر
[www.downcodes.com] ضع كل العناصر في الطبقة مع التفاف المعرف، واضبط لون حدودها على #e5f2f8 لجعلها تبدو وكأنها لها تأثير الظل.
ثم قم بإنشاء قائمة طبقات بداخلها، وقم بإنشاء ثلاث طبقات داخل القائمة، وهي:
مثال لكود المصدر
[www.downcodes.com] list_title
list_pic
list_text
لنبدأ بكتابة كود HTML بالتفصيل:
مثال لكود المصدر
[www.downcodes.com] قم بتحريك h3 إلى اليسار في طبقة list_title لإنشاء العنوان، وتطفو إلى اليمين لإنشاء المزيد من الاتصالات، وإنشاء صور ul+li متبقية عائمة في طبقة list_pic؛
أنشئ ul+li في طبقة list_text لإنشاء قائمة أخبار؛
في الجزء السفلي، ضع طبقة ذات فئة واضحة لمسح العوامات.
باستخدام الأساس المذكور أعلاه، ابدأ ترميز CSS التالي:
البيان الشامل:
مثال لكود المصدر
[www.downcodes.com] * { حجم القائمة: 0؛ حجم الخط: 12 بكسل؛
أ{ اللون:#666666؛زخرفة النص: لا شيء؛}
أ:تحويم { اللون: #2764b4؛ زخرفة النص: تسطير؛}
قم بتعيين نمط غلاف الطبقة بالكامل، والعرض هو 450 بكسل، والهوامش العلوية والسفلية 30 بكسل، ويتم محاذاة الجانبين الأيسر والأيمن أفقيًا، ويتم ضبط الحدود على اللون الأزرق (هنا لزيادة تأثير الظل)
مثال لكود المصدر
[www.downcodes.com] #wrap{ العرض: 450 بكسل؛ الهامش: 30 بكسل حد تلقائي: 1 بكسل صلب #e5f2f8;}
.قائمة { العرض: 448 بكسل؛ الحدود: 1 بكسل الصلبة #a4a4a4؛}
تعريف نمط جزء العنوان list_title:
اضبط العرض على 426 بكسل، والمساحة العلوية والسفلية على 0، والهوامش اليسرى واليمنى على 10 بكسل.
يطفو عنصر اسم العمود h3 إلى اليسار؛ ويبلغ العرض 300 بكسل؛
اضبط عنصر الامتداد ليطفو على اليمين بعرض 60 بكسل؛ وقم بمحاذاة النص إلى اليمين واضبط الرابط
مثال لكود المصدر
[www.downcodes.com] .list_title{ العرض: 426 بكسل؛ الحشو: 0 10 بكسل؛ الحدود: 1 بكسل الصلبة #fff؛}
.list_title h3{ تعويم: يسار العرض: 300 بكسل؛}
.list_title تمتد { float:right width:60px;
تعريف نمط طبقة الصورة list_pic:
أولاً، استخدم قائمة ul واضبط العرض على 433 بكسل؛
ما يحتاج إلى الاهتمام هو إعداد الحشو: الحشو:15px 0 0 15px;
(سبب تعيين الهامش الداخلي الأيمن على 0 هو مشكلة التباعد الخاصة بـ li، مما يؤدي إلى تحسين أداء الصفحة. يمكنك أيضًا تعيينه على: الحشو: 15px 15px 0 15px؛ تأثير التباين)
يضبط li حجم كتلة الصورة على 94 بكسل، وهامش التباعد: 0 14 بكسل 0 0;
يتغير لون حدود الصورة من الأزرق إلى الرمادي عند تحريك الماوس؛
تعيين نمط نص الرابط،
تحويل الامتداد إلى عنصر الكتلة. يتم أيضًا تحويل الروابط الموجودة داخل النطاق إلى عناصر كتلة، ويتم ضبط العرض والارتفاع على 94 بكسل و20 بكسل على التوالي؛ ويتم ضبط تباعد الأسطر على 20 بكسل ويتم محاذاة النص أفقيًا ومركزيًا.
مثال لكود المصدر
[www.downcodes.com] .list_pic{العرض:433px الحشو:15px 0 0 15px؛}
.list_pic لي { العرض: مضمن؛ تعويم: يسار؛ الهامش: 0 14 بكسل 0 0؛}
.list_pic لى img { العرض: 90 بكسل الارتفاع: 70 بكسل؛}
.list_pic li a img { border:2px Solid #b3deee;}
.list_pic li a:hover img{border:2px Solid #ccc;}
.list_pic لي سبان {عرض: كتلة العرض: 94 بكسل الارتفاع: 20 بكسل؛}
.list_pic لي سبان {عرض:كتلة؛}
تعريف نمط طبقة النص list_text:
حدد قائمة الأخبار من خلال ul+li وتجدر الإشارة إلى أن الفترة الزمنية تطفو على اليمين، ويتم كتابة النص على الحد العلوي بخط منقط أزرق على اليمين، ويتم ضبط الهامش العلوي على 10 بكسل؛
مثال لكود المصدر
[www.downcodes.com] .list_text{width:426px; الهامش:10px;
.list_text li{ float:left width:100%;
.list_text لي سبان{ تعويم: محاذاة النص: يمين؛}
أخيرًا، قم بمسح التعويم: .clear{ واضح:كلاهما؛}
