غالبًا ما يُشار إلى الكتلة الأفقية السفلية لتخطيط الصفحة باسم "التذييل". في ذلك ، كما هو الحال في كتل أخرى من الصفحة ، يتم وضع عناصر التصميم ، ولكن على عكس غيرها ، غالبًا ما تنشأ مشكلات محددة مع تحديد موضع هذه الكتلة المعينة. إنها مرتبطة بحقيقة أن المتصفحات المختلفة تفهم معايير لغة CSS بشكل مختلف وقد يكون من الصعب جدًا جعل التذييل في الحافة السفلية من نافذة المتصفح. يوجد أدناه رمز أحد حلول هذه المشكلة.
ضروري
المعرفة الأساسية بـ CSS و HTML
تعليمات
الخطوة 1
في السطر الأول من التعليمات البرمجية المصدر للصفحة ، ضع مرجعًا لمواصفات XHTML 1.0 Transitional:
الخطوة 2
ضع الكتل الرئيسية لهيكل الصفحة داخل نص المستند (بين العلامات و). يجب أن تتكون الكتلة التي سيتم وضع المحتوى الرئيسي فيها من طبقتين متداخلتين. على سبيل المثال ، دع الشكل الخارجي يحتوي على المعرف OuterDiv ، والداخلي - InnerDiv:
هذا هو المكان الذي سيكون المحتوى الرئيسي للصفحة فيه.
خلفهم ، ضع كتلة تذييل مع معرف ، على سبيل المثال ، FooterDiv:
تذييل الصفحة.
الخطوه 3
ضع في الجزء الرئيسي من كود HTML (بين العلامات و) رابطًا لملف خارجي مع وصف لأنماط المغلق:
import "footerStyle.css"؛
الخطوة 4
احفظ كود الصفحة الرئيسية الكامل في ملف بامتداد html. قد يبدو كالتالي:
تذييل مضغوط
import "footerStyle.css"؛
هذا هو المكان الذي سيكون فيه المحتوى الرئيسي للصفحة.
تذييل الصفحة.
الخطوة الخامسة
قم بإنشاء ملف ورقة أنماط - ملف نص عادي يجب حفظه بامتداد css والاسم الذي حددته في كود HTML (footerStyle.css). اكتب في هذا الملف أوصاف الأنماط التالية للكتل المستخدمة في الصفحة:
* {الهامش: 0 ؛ المساحة المتروكة: 0}
html ، جسم {الارتفاع: 100٪ ؛}
الجسم {
الموقف: نسبي ؛
اللون: # 222222 ؛
}
#OuterDiv {
الهامش: 0؛
الحد الأدنى للارتفاع: 100٪ ؛
الخلفية: #aaaaaa؛
اللون: # 222222 ؛
}
* html #OuterDiv {الارتفاع: 100٪ ؛}
#FooterDiv {
الموقف: نسبي ؛
واضحة على حد سواء؛
أعلى الهامش: -60 بكسل ؛
الارتفاع: 60 بكسل ؛
العرض: 100٪؛
لون الخلفية: أزرق غامق.
محاذاة النص: مركز ؛
اللون: #eeeeff ؛
}
. InnerDiv {
العرض: 100٪؛
تعويم: اليسار؛
}
