يستخدم CSS ul للتخطيط متعدد الأعمدة لصفحات الويب

الكاتب：Eve Cole وقت التحديث：2009-05-31 01:02:37

لقد فكرت فجأة في هذه الطريقة عندما كنت أكتب تخطيطًا من ثلاثة أعمدة باستخدام CSS قبل بضعة أيام. تبدو هذه الفكرة مجنونة بعض الشيء بالنسبة لي. إذا كان هناك أي خطأ في ذلك، فلا تتردد في إعطائي بعض النصائح.

عندما أحتاج إلى كتابة تخطيط من ثلاثة أعمدة، عادةً ما أختار استخدام طريقة تخطيط DIV التالية:

لا شك أن استخدام طريقة التداخل هذه يمكن أن يقلل كثيرًا من احتمال حدوث أخطاء في التعليمات البرمجية، ولكن في الوقت نفسه، يكون هذا التخطيط أيضًا معقدًا بعض الشيء وغير مريح قليلاً للصيانة اللاحقة. الطريقة التي نستخدمها غالبًا عند تخطيط التنقل هي استخدام قائمة <ul> للتخطيط. يمكن وصف التنقل بأنه تخطيط متعدد الأعمدة. في هذه الحالة، يمكننا أيضًا استخدام <ul> لتخطيط الصفحة. تخطيط العمود.

هذا تخطيط ذو عرض ثابت، مما يعني أنه ليس سلسًا جدًا. لم يتم اختبار التخطيط المرن بعد، وسأحاول مرة أخرى عندما يكون لدي الوقت.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<الرأس>
<meta http-equiv=”Content-Type” content=”text/html;
<title>استخدام UL للتخطيط متعدد الأعمدة</title>
<نمط النوع = "نص/CSS">
* {الهامش:0؛}
جسم {
العرض: 100%؛
الارتفاع: 100%؛
الخلفية:#ddedfb;
}
#المحتوى الرئيسي {
العرض: 600 بكسل؛
الهامش: 10 بكسل تلقائي؛
}
#الرأس، #التذييل {
الخلفية:#8AC7FA؛
الارتفاع: 80 بكسل؛
واضح:كلاهما؛
}
#تذييل {
واضح:كلاهما؛
الحشو العلوي: 10 بكسل؛
}
#محتوى {
الارتفاع: 300 بكسل؛
الهامش: 10 بكسل تلقائي؛
}
#محتوى {
نمط القائمة: لا شيء؛
الارتفاع: 100%؛
}
#محتوى{
العرض: 150 بكسل؛
الارتفاع: 100%؛
الخلفية:#8AC7FA؛
تعويم: يسار؛
}
#contentulli#li2 {
العرض: 280 بكسل؛
الهامش: 0 10 بكسل؛
}
#المحتوى ul li#li2 ul li {
العرض: 270 بكسل؛
الارتفاع: 140 بكسل؛
الهامش: 5 بكسل؛
الخلفية:#0581F0;
}
</نمط>
</الرأس>

<الجسم>
<div معرف = "المحتوى الرئيسي">
<div id="header">هذا هو الرأس</div>
<div معرف = "المحتوى">
<ul>
<li>هذا هو الجانب الأيسر</li>
<لي معرف = "li2">
<ul>
<li>هذا هو الجزء العلوي من الوسط</li>
<li>هذا هو الجزء السفلي في المنتصف</li>
</ul>
</لي>
<li>هذا هو الجانب الأيمن</li>
</ul>
</div>
<div id="footer">هذا هو الجزء السفلي</div>
</div>
</الجسم>
</html>

يمكن عرض هذا الرمز بشكل طبيعي ضمن IE7 وFF3 ولم يتم اختباره على المتصفحات الأخرى، إذا كان لديك طريقة أفضل، فيرجى اقتراحها.