لقد فكرت فجأة في هذه الطريقة عندما كنت أكتب تخطيطًا من ثلاثة أعمدة باستخدام CSS قبل بضعة أيام. تبدو هذه الفكرة مجنونة بعض الشيء بالنسبة لي. إذا كان هناك أي خطأ في ذلك، فلا تتردد في إعطائي بعض النصائح.
عندما أحتاج إلى كتابة تخطيط من ثلاثة أعمدة، عادةً ما أختار استخدام طريقة تخطيط DIV التالية:
لا شك أن استخدام طريقة التداخل هذه يمكن أن يقلل كثيرًا من احتمال حدوث أخطاء في التعليمات البرمجية، ولكن في الوقت نفسه، يكون هذا التخطيط أيضًا معقدًا بعض الشيء وغير مريح قليلاً للصيانة اللاحقة. الطريقة التي نستخدمها غالبًا عند تخطيط التنقل هي استخدام قائمة
هذا تخطيط ذو عرض ثابت، مما يعني أنه ليس سلسًا جدًا. لم يتم اختبار التخطيط المرن بعد، وسأحاول مرة أخرى عندما يكون لدي الوقت.
| <الرأس> <نمط النوع = "نص/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; } <الجسم> هذا هو الرأس
<لي معرف = "li2"> |
يمكن عرض هذا الرمز بشكل طبيعي ضمن IE7 وFF3 ولم يتم اختباره على المتصفحات الأخرى، إذا كان لديك طريقة أفضل، فيرجى اقتراحها.