بلوک افقی پایین یک طرح صفحه اغلب به عنوان "پاورقی" خوانده می شود. در آن ، مانند سایر بلوک های صفحه ، عناصر طراحی قرار داده شده است ، اما بر خلاف دیگران ، مشکلات خاص اغلب با موقعیت این بلوک خاص بوجود می آید. آنها با این واقعیت مرتبط هستند که مرورگرهای مختلف استانداردهای زبان CSS را به طور متفاوتی درک می کنند و دستیابی به صفحه در لبه پایین پنجره مرورگر بسیار دشوار است. در زیر کد یکی از راه حل های این مشکل آورده شده است.
ضروری است
دانش پایه CSS و HTML
دستورالعمل ها
مرحله 1
در خط اول کد منبع صفحه ، به مشخصات XHTML 1.0 Transitional مراجعه کنید:
گام 2
بلوک های اصلی ساختار صفحه را در داخل متن سند قرار دهید (بین برچسب ها و). بلوکی که محتوای اصلی در آن قرار می گیرد باید از دو لایه تو در تو تشکیل شود. به عنوان مثال ، اجازه دهید شناسه خارجی دارای شناسه OuterDiv باشد ، و شناسه داخلی - InnerDiv:
اینجاست که محتوای اصلی صفحه خواهد بود.
پشت آنها یک بلوک فوتر با یک شناسه قرار دهید ، به عنوان مثال ، FooterDiv:
پاورقی صفحه.
مرحله 3
در قسمت اصلی کد HTML (بین برچسب ها و) یک پیوند به یک فایل خارجی با شرح سبک های css قرار دهید:
import "footerStyle.css"؛
مرحله 4
کد کامل صفحه اصلی را در فایلی با پسوند html ذخیره کنید. ممکن است به این شکل باشد:
پاورقی فشرده
import "footerStyle.css"؛
اینجاست که محتوای اصلی صفحه خواهد بود.
پاورقی صفحه.
مرحله 5
یک فایل شیوه نامه ایجاد کنید - یک فایل متنی ساده که باید با پسوند css و نامی که در کد HTML مشخص کرده اید (footerStyle.css) ذخیره شود. برای این بلوک توضیحات سبک زیر را برای بلوک های استفاده شده در صفحه بنویسید:
* {حاشیه: 0؛ بالشتک: 0}
html ، body {قد: 100٪؛}
بدن {
موقعیت: نسبی؛
رنگ: # 222222؛
}
#OuterDiv {
حاشیه: 0؛
حداقل قد: 100٪
زمینه: #aaaaaa؛
رنگ: # 222222؛
}
* html #OuterDiv {ارتفاع: 100٪؛}
#FooterDiv {
موقعیت: نسبی؛
روشن: هر دو؛
margin-top: -60px؛
ارتفاع: 60 پیکسل
عرض: 100٪
background-color: DarkBlue؛
text-align: مرکز؛
رنگ: #eeeeff؛
}
. InnerDiv {
عرض: 100٪
شناور به سمت چپ؛
}
