اليوم ، عندما يصبح شاشات المستخدمين أكبر وأكبر ، أصبح تخطيط العرض الصلب 1024*768 أكثر فأكثر. نفايات الشاشة ، كمصمم ويب ، تتحمل مسؤولية إعطاء هذه المجموعة من المستخدمين واجهة مستخدم جيدة. بالطبع ، من أجل تقليل مضيعة هذا النوع من الشاشة ، فإن اعتماد تخطيط السوائل المرن هو الحل الأفضل. ومع ذلك ، نظرًا لقيود مختلفة ، فإن صفحات الويب الحالية ليست مجهزة بالكامل بظروف تبني مرونة السوائل بالكامل (خاصة التدمير عديمي الضمير للمعايير من قبل الشركات المصنعة للمتصفح والدعم غير المكتمل لمعايير CSS ، وما إلى ذلك). كوسطاء بين المستخدمين والمصنعين ، يمكننا فقط التكيف مع الفجوة بين الاثنين مع موقف متوافق. لذلك ، كحل انتقالي ، هناك مثل هذا التصميم: تخطيط العرض الصلب المرن +. تشير المرونة المذكورة هنا إلى الخلفية التي تتكيف مع عرض الشاشة ، في حين أن العرض الصلب يعني أن المحتوى الرئيسي يمكن أن يركز تلقائيًا في كل من الشاشة العريضة والشاشة الضيقة. البقاء على قيد الحياة في الفجوة لتلبية احتياجات المستخدمين بأحجام وقرارات مختلفة. التصميم الموضح في الشكل أدناه هو مثال نموذجي. دعنا نتحدث أقل هراء ونعود إلى هذه النقطة ، دعنا ننشئ بنية تخطيط مثل هذا. أولاً قم ببناء الطبقة الهيكلية: دعنا نحلل طبقة الهيكل. للتصميم بهذه الطريقة؟ قمنا بتعيين حاويات الغلاف والتذييل على عرض 100 ٪ للتكيف تلقائيًا مع عرض الشاشة. وأيضًا تعيين مساحة الرأس بعرض 100 ٪. وبهذه الطريقة ، يمكننا إدراج صورة مبلطة أفقياً في الرأس وتذييل ، بحيث يمكن لخلفية الرأس والتذييل أن تملأ مساحة الشاشة بالكامل تحت الشاشة الكبيرة. كمحتوى رئيسي ، فإن نهجنا العام هو السماح له بالتوسيع وترك الفراغات على كلا الجانبين عندما تصبح الدقة أكبر. نظرًا لأن منطقة الرأس قد تم تعيينها على عرض 100 ٪ ، فإننا نضيف طبقة حاوية في الرأس إلى الرأس ، والتي تعمل كحامل محتوى نص الرأس الحقيقي. دعه يركز تلقائيًا. وبهذه الطريقة ، يطفو نص الرأس على الطبقة العليا من Haeader. على نفس المنوال ، يمكن أيضًا تنفيذ تذييل التذييل بهذه الطريقة. في طبقة الهيكل أعلاه ، لم أستخدم هذه الطريقة في منطقة المحتوى الأوسط ، لكنني جعلت القليل من الحلول. ما الذي يجب أن نفعله إذا لم يظهرنا على جانبي النص تحت دقة كبيرة؟ بالطبع ، من أجل تقليل التعشيش ، يمكننا تبني الحلول. يمكننا إضافة صورة كبيرة الحجم إلى الخلفية في الجسم واستخدام موقع الخلفية لوضع الصورة في الوسط ، بحيث يتم عرض الصور على جانبي منطقة المحتوى. هذه المدونة هي حالة محددة. ويتم دائمًا عرض محتوى النص في المركز. لإظهار التأثير ، نضيف بعض تعديلات الألوان الأخرى ، والنمط النهائي هو كما يلي: <div id = "wrapper">
<div id = "main" class = "clearfix">
<div id = "header">
<div id = "inheader"> </viv>
</div>
<div id = "content"> </viv>
</div>
</div>
<div id = "footer">
<div id = "infoot"> </viv>
</div> #inheader {العرض: 960px ؛ الارتفاع: 110 بكسل ؛ *{الهامش: 0 ؛ حشو: 0 ؛}
HTML ، Body ، #WRAPPER {الارتفاع: 100 ٪ ؛ حجم الخط: 12px ؛}
#wrapper {العرض: 100 ٪ ؛ الخلفية:#777 ؛}
body> #wrapper {الارتفاع: Auto ؛
#main {padding-bottom: 54px ؛ min-width: 960px ؛}/* يجب استخدامه لاستخدام نفس ارتفاع تذييل ، والحد الأدنى لعرض IE6 إضافة JS لحل المشكلة*/
#header {text-align: center ؛ color: #fff ؛ background:#333 ؛}
#inheader {width: 960px ؛ الارتفاع: 110px ؛ خط الارتفاع: 110px ؛ الهامش: 0 Auto ؛ الخلفية:#cc9933 ؛}
H3 {Font-Size: 14px ؛ Line-Height: 50px ؛}
#inheader p {font-size: 12px ؛ line-line: 30px ؛}
#footer {
الموقف: قريب
الهامش: -54px ؛
الارتفاع: 54px ؛/* ارتفاع تذييل*/
العرض: 100 ٪ ؛
Min Width: 960px ؛/* add Js إلى الحد الأدنى عرض IE6 لحل المشكلة*/
واضح: كلاهما ؛
الخلفية:#666 ؛
محاذاة النص: المركز ؛
اللون: #ffff ؛
}
#infoot {الارتفاع: 54px ؛ خط الارتفاع: 54px ؛ العرض: 960px ؛ الهامش: 0 Auto ؛ الخلفية:#cc9966 ؛}
#footer p {line-height: 26px ؛}
#content {background:#999 ؛ width: 960px ؛ margin: 0 auto ؛ الارتفاع: 692px ؛}
#content p {line-height: 30px ؛ padding: 0 30px ؛ color: #ffff ؛}
) فيما يلي "تعويم عالمي مشهور" Clearfix Hack*/
.clearfix: بعد {
محتوى: "."؛
العرض: كتلة ؛
الارتفاع: 0 ؛
واضح: كلاهما ؛
الرؤية: مخفية ؛}
.clearfix {display: inline-block ؛}
/* يختبئ من IE-MAC */
* html .clearfix {الارتفاع: 1 ٪ ؛}
.clearfix {display: block ؛}
/ * نهاية الاختباء من IE-MAC */