"Altbilgi" odatda veb-sahifa maketining eng pastki qismi hisoblanadi. Ushbu altbilgini joylashtirishdagi eng keng tarqalgan qiyinchilik, sahifa to'liqligi yoki brauzer turidan qat'i nazar, uni har doim oynaning pastki qismida joylashtirishdir. Blokni joylashtirishga katta o'tish vaqtidan beri muammoni hal qilishning bir necha yo'li mavjud va ulardan biri quyida keltirilgan.
Bu zarur
CSS va HTML bo'yicha asosiy bilimlar
Ko'rsatmalar
1-qadam
Eng keng tarqalgan sahifalarni joylashtirish sxemasini asos qilib olamiz - uchta blok bir-birining ustiga joylashtirilgan. Ustki (sarlavha) har doim oynaning yuqori chegarasiga, pastki qismi (altbilgi) - pastki chegaraga to'g'ri kelishi kerak va asosiy (tanasi) har doim ularning orasidagi barcha bo'shliqni to'ldirishi kerak. Manba kodida XHTML 1.0 Transitions spetsifikatsiyasiga havola bo'lishi kerak va uslublar tavsifi tashqi CSS-faylga joylashtirilishi kerak (Opera 9. XX bilan bog'liq muammolarni oldini olish uchun). Tuzilmaning HTML tavsifi asosiy qismga joylashtirilgan bo'lishi kerak sahifaning asosiy qismi. Bu, albatta, yuqori blokdan boshlanadi, uning yorlig'iga qiymati bilan identifikator atributi qo'yilishi kerak, masalan, divHead:
Sarlavha bloki.
Asosiy blok bir juft ichki bloklardan iborat bo'lishi kerak. Tashqi qismiga divOut identifikatori beriladi, ichki qismiga esa divContent:
Asosiy tarkib.
Altbilgi divFoot-ga o'rnatildi:
Sahifa altbilgisi.
2-qadam
Sahifaning to'liq HTML kodi quyidagicha bo'lishi kerak:
Uch blok
@import "style.css";
Bu sarlavha bloki.
Asosiy tarkib.
Bu sahifaning altbilgisi.
3-qadam
Uslub tavsifi quyidagi tartib mexanizmini amalga oshiradi: o'rta blok (divOut) 100% balandlikka o'rnatiladi, yuqori blok (divHead) mutlaq joylashishga ega, pastki qismi esa nisbiy. Asosiy kontent blokida (divContent) yuqori qismida sarlavha blokining balandligiga teng bo'sh joy bo'lishi kerak, shunda u sahifaning asosiy tarkibiga to'g'ri kelmaydi. Va pastki blok (altbilgi) yuqoridagi manfiy chegaraga ega bo'lishi kerak, bu blok balandligiga teng. Bu brauzer oynasining pastki chegarasidan yuqoriga ko'tariladi. Ushbu mexanizmni quyidagi tarkibdagi CSS fayli yordamida amalga oshirish mumkin: * {margin: 0; to'ldirish: 0}
HTML, tanasi {balandligi: 100%;} tanasi {
pozitsiya: nisbiy;
rang: # 000;
}
#divOut {
margin: 0;
minimal balandlik: 100%;
fon: #FFF;
rang: # 000;
}
* html #divOut {balandligi: 100%;}
#divHead {
pozitsiya: mutlaq;
chapda: 0;
yuqori: 0;
kengligi: 100%;
balandligi: 80 piksel;
fon: # 2F5000;
toshib ketish: yashirin;
matn bilan tekislash: markaz;
rang: #FFF;
} #divFoot {
pozitsiya: nisbiy;
aniq: ikkalasi ham;
margin-top: -60px;
balandligi: 60 piksel;
kengligi: 100%;
orqa rang: # 2F5000;
matn bilan tekislash: markaz;
rang: #FFF;
}
.divContent {
kengligi: 100%;
suzuvchi: chap;
plomba-tepa: 81px;
} HTML-kodidagi uslublar jadvali uchun siz ko'rsatgan ism style.css.
