هذه هي الطريقة التي أقوم بها بإنشاء رمز تخطيط DIV. لا أعرف إذا كان الأمر واضحًا أم لا.
فكرتي هي أنه يمكننا في المستقبل استخدام الأجزاء القياسية لتجميع تخطيط DIV لصفحة الويب
أقوم بتقسيم الفصول الدراسية إلى نوعين، فئة التخطيط وفئة التصميم هي فئة الهيكل العظمي وفئة الأسلوب هي الملابس.
على سبيل المثال:
على سبيل المثال، العمود الأيسر في التخطيط
بادئ ذي بدء، خصائصه هي: العمود الأيسر، والعرض، ولون الخلفية، ولون الخط، وما إلى ذلك.
1. أولاً، سيتم تعريف فئة، مثل: .layout، والتي تستخدم بشكل أساسي للتحكم في حجم الصفحة بالكامل.
.layout{width:98%;margin:0 auto;text-align:left;}
2. ثم سيتم تحديد 3 فئات تخطيط أساسية (l،m،r).
.ل{تعويم: يسار}
م {العرض: تلقائي}
.ر {تعويم: يمين}
أقوم أيضًا بتصنيف التخطيط المكون من عمودين إلى تخطيط مكون من 3 أعمدة، لأنه في التخطيط المكون من 3 أعمدة، عندما يكون عرض العمودين الأيسر والأيمن 0، تصبح 3 أعمدة عمودين.
عندما نكتب كود التخطيط الأساسي، فمن الأفضل كتابته بتنسيق مكون من 3 أعمدة.
3. وفقًا لفئة التخطيط، حدد فئة النمط المطلوبة، مثل العرض والارتفاع ولون الخلفية وما إلى ذلك. هذه كلها عناصر نمط.
.class_l{خلفية:#ff0;الهامش الأيمن: -150px;العرض:150px;}
.class_m{الخلفية:#f00;الهامش:0 140px 0 150px;}
.class_r{الخلفية:#00f;الهامش الأيسر: -140px;العرض:140px;}
هناك مجموعة واحدة فقط من فئات التخطيط، ولكن يمكن تعريف العديد من فئات الأنماط.
على سبيل المثال، تريد إنشاء تخطيط صغير مكون من عمودين في العمود الأوسط.
يمكنك تحديد فئة نمط أخرى
.mid_l{خلفية:#ff0;الهامش الأيمن: -100px;العرض:100px;}
.mid_m{الخلفية:#f00;الهامش:0 0 0 100px;}
4. قم بدمج فئة التخطيط وفئة النمط والإشارة إليهما في الكود مثل هذا
<div class=l class＿l></div>
<div class=l mid_l></div>
اقتبس كلا الفئتين، مفصولة بمسافات، الأول هو فئة التخطيط، والثاني هو فئة النمط. يمكنك الاستمرار في اقتباس الفئتين بمسافات معرف لتحديد.
يمكن أيضًا كتابة بعض فئات الأنماط الأخرى شائعة الاستخدام على أنها عالمية، على سبيل المثال، يمكن تعريفها ضمنيًا على أنها
إخفاء {العرض: لا شيء}
ثم عند الحاجة، استخدم class=xxx إخفاء للإشارة إليه، وهو أمر مريح للغاية.
شفرة: