أولاً، انقر هنا لرؤية تأثير التشغيل الفعلي. يمكن أن تكون هذه الصفحة مركزية وقابلة للتكيف بدرجة كبيرة في متصفحات mozilla وopera وIE. دعونا نحلل الكود:
رمز كامل
<أتش تي أم أل>
<الرأس>
<نمط النوع = "نص/CSS">
جسم{
الخلفية:#999;
محاذاة النص:مركز؛
اللون: #333؛
عائلة الخط: arial، verdana، sans-serif؛
}
#رأس{
العرض: 776 بكسل؛
الهامش الأيمن: تلقائي؛
الهامش الأيسر: تلقائي؛
الحشو: 0 بكسل؛
الخلفية: #EEE؛
الارتفاع: 60 بكسل؛
محاذاة النص:يسار؛
} #يحتوي{
الهامش الأيمن: تلقائي؛
الهامش الأيسر: تلقائي؛
العرض: 776 بكسل؛
} #مينبج{
العرض: 776 بكسل؛
الحشو: 0 بكسل؛
الخلفية: #60A179؛
تعويم: يسار؛
}
#يمين{
تعويم: حق؛
الهامش: 2px 0px 2px 0px؛
الحشو: 0 بكسل؛
العرض: 574 بكسل؛
الخلفية: #ccd2de؛
محاذاة النص:يسار؛
}
#غادر{
تعويم: يسار؛
الهامش: 2px 2px 0px 0px؛
الحشو: 0 بكسل؛
الخلفية: #F2F3F7؛
العرض: 200 بكسل؛
محاذاة النص:يسار؛
}
#تذييل{
واضح:كلاهما؛
العرض: 776 بكسل؛
الهامش الأيمن: تلقائي؛
الهامش الأيسر: تلقائي؛
الحشو: 0 بكسل؛
الخلفية: #EEE؛
الارتفاع: 60 بكسل؛}
.نص{الهامش:0px;الحشو:20px;}
</نمط>
</الرأس>
<الجسم>
<div id="header">الرأس</div>
<div معرف = "يحتوي">
<div معرف = "mainbg">
<div معرف = "يمين">
<div
class="text">يمين<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div معرف = "يسار">
<div class="text">يسار</div>
</div>
</div>
</div>
<div id="footer">التذييل</div>
</الجسم>
</html>
بعد ذلك، حدد العمودين الأوسطين #اليمين و #اليسار. من أجل توسيط العمودين الأوسطين، قمنا بتداخل طبقة #contain خارجهما وقمنا بتعيين هامش:تلقائي للاحتواء، بحيث يتم توسيط #اليمين و #اليسار بشكل طبيعي.
انتبه إلى ترتيب تعريف العمودين الأوسطين، نحدد أولاً #right ونتركه يطفو على الجانب الأيمن من طبقة #contain من خلال float: right;. ثم حدد #left واتركه يطفو على يسار الطبقة #اليمين من خلال float: left;. وهذا عكس الترتيب الذي حددنا به الجدول من اليسار إلى اليمين (التصحيح: اليسار أولاً ثم اليمين، أو أول اليمين ثم اليسار، يمكنك تصميمه حسب احتياجاتك الخاصة).
نرى أن هناك طبقة #mainbg متداخلة بين #contain والعمودين في الكود. ما هو الغرض من هذه الطبقة؟ تُستخدم هذه الطبقة لتحديد خلفية #contain. ستتساءل بالتأكيد، لماذا لا تحدد الخلفية مباشرة في #contain، بل تضيف طبقة أخرى؟ وذلك لأن الخلفية المحددة مباشرة في #contain لن يتم عرضها في mozilla، ويجب تحديد قيمة الارتفاع. إذا تم تحديد قيمة الارتفاع، فلا يمكن للطبقة # اليمنى أن تتغير تلقائيًا وفقًا للمحتوى. من أجل حل مشاكل الخلفية والارتفاع، من الضروري إضافة طبقة #mainbg. الحيلة هي تحديد float: left لطبقة #mainbh، لأن float يعطي تلقائيًا سمات العرض والارتفاع للطبقة. (دعونا نفهم الأمر بهذه الطريقة في الوقت الحالي :)
وأخيرًا، حدد طبقة #footer في الأسفل. مفتاح هذا التعريف هو: واضح: كلاهما؛ وظيفة هذه الجملة هي إلغاء الميراث العائم لطبقة #التذييل. بخلاف ذلك، ستشاهد #التذييل معروضًا بجوار #الرأس بدلاً من #أسفل #اليمين.
بمجرد تحديد الطبقات الرئيسية، يصبح التخطيط جاهزًا. نقطة إضافية واحدة: لقد رأيت أنني قمت أيضًا بتعريف .text{margin:0px;padding:20px;}. وظيفة هذه الفئة هي إنشاء هامش 20 بكسل حول المحتوى. لماذا لا تحدد الهامش أو الحشو مباشرة في #right؟ لأن Mozilla وIE لديهما تفسيرات غير متناسقة لنموذج مربع CSS، فإن تحديد الهامش/الحشو مباشرة سيؤدي إلى تشوه التخطيط في Mozilla. عادةً ما أقوم بحل المشكلة عن طريق وضع طبقة أخرى بالداخل.