عادةً ما يكون "التذييل" هو الجزء السفلي من تخطيط صفحة الويب. تتمثل الصعوبة الأكثر شيوعًا في وضع هذا التذييل في وضعه دائمًا في أسفل النافذة ، بغض النظر عن امتلاء الصفحة أو نوع المتصفح. كان هناك عدد غير قليل من الحلول للمشكلة منذ وقت الانتقال الهائل إلى تخطيط الكتلة ، وأحدها مذكور أدناه.
انه ضروري
المعرفة الأساسية بـ CSS و HTML
تعليمات
الخطوة 1
لنأخذ مخطط تخطيط الصفحة الأكثر شيوعًا كأساس - ثلاث كتل موضوعة واحدة فوق الأخرى. يجب دائمًا محاذاة الجزء العلوي (الرأس) مع الحد العلوي للنافذة ، والجزء السفلي (التذييل) - إلى الحد السفلي ، ويجب أن يملأ (النص) الرئيسي دائمًا كل المسافة بينهما. يجب أن تحتوي التعليمات البرمجية المصدر على ارتباط لمواصفات XHTML 1.0 Transitional ، ويجب وضع وصف الأنماط في ملف CSS خارجي (لتجنب المشاكل مع Opera 9. XX). يجب وضع وصف HTML للهيكل في نص الصفحة. سيبدأ بالطبع من الكتلة العلوية ، حيث يجب وضع سمة المعرف ذات القيمة ، على سبيل المثال ، divHead:
كتلة الرأس.
يجب أن تتكون الكتلة الرئيسية من زوج من الكتل المتداخلة. سيتم إعطاء الخارجي معرف divOut ، والمعرف الداخلي - divContent:
المحتوى الرئيسي.
تم ضبط التذييل على divFoot:
تذييل الصفحة.
الخطوة 2
يجب أن تبدو شفرة HTML الكاملة للصفحة كما يلي:
ثلاث كتل
import "style.css" ؛
هذا هو رأس كتلة.
المحتوى الرئيسي.
هذا هو تذييل الصفحة.
الخطوه 3
يقوم وصف النمط بتنفيذ آلية التخطيط التالية: يتم تعيين الكتلة الوسطى (divOut) على ارتفاع 100٪ ، وسيكون للكتلة العلوية (divHead) موضع مطلق ، والكتلة السفلية - نسبي. في قالب المحتوى الرئيسي (divContent) ، يجب أن تكون هناك مساحة خالية في الجزء العلوي مساوية لارتفاع كتلة العنوان حتى لا تتداخل مع المحتوى الرئيسي للصفحة. ويجب أن يكون للكتلة السفلية (التذييل) هامش سلبي في الأعلى يساوي ارتفاع هذه الكتلة. سيؤدي ذلك إلى رفعه فوق الحد السفلي لنافذة المتصفح. يمكن تنفيذ هذه الآلية باستخدام ملف css بالمحتوى التالي: * {margin: 0؛ المساحة المتروكة: 0}
html، body {height: 100٪؛} body {
الموقف: نسبي ؛
اللون: # 000 ؛
}
#divOut {
الهامش: 0؛
الحد الأدنى للارتفاع: 100٪ ؛
الخلفية: #FFF ؛
اللون: # 000 ؛
}
* html #divOut {الارتفاع: 100٪ ؛}
#divHead {
الموقف: مطلق.
اليسار: 0؛
أعلى: 0؛
العرض: 100٪؛
الارتفاع: 80 بكسل ؛
الخلفية: # 2F5000 ؛
إخفاء الفائض؛
محاذاة النص: مركز ؛
اللون: #FFF ؛
} #divFoot {
الموقف: نسبي ؛
واضحة على حد سواء؛
أعلى الهامش: -60 بكسل ؛
الارتفاع: 60 بكسل ؛
العرض: 100٪؛
لون الخلفية: # 2F5000 ؛
محاذاة النص: مركز ؛
اللون: #FFF ؛
}
.divContent {
العرض: 100٪؛
تعويم: اليسار؛
أعلى الحشو: 81 بكسل ؛
} الاسم الذي حددته لورقة الأنماط في كود HTML هو style.css.
