"Altbilgi" ümumiyyətlə veb səhifə düzəninin ən alt hissəsidir. Bu altbilginin yerləşdirilməsində ən çox rast gəlinən çətinlik, səhifənin dolğunluğundan və brauzer növündən asılı olmayaraq, həmişə pəncərənin alt hissəsində yerləşdirilməsidir. Blok planına kütləvi keçid dövründən bəri problemə bir neçə həll yolu var və bunlardan biri aşağıda verilmişdir.
Vacibdir
CSS və HTML əsas bilikləri
Təlimat
Addım 1
Ən ümumi səhifə düzeni sxemini əsas götürək - bir-birinin üstünə qoyulmuş üç blok. Yuxarı (başlıq) həmişə pəncərənin yuxarı sərhədinə, alt (altbilgi) - alt sərhədyə uyğunlaşdırılmalı və əsas (gövdə) daima aralarındakı bütün boşluğu doldurmalıdır. Mənbə kodu XHTML 1.0 Keçid spesifikasiyasına bir keçid içərisində olmalıdır və üslubların təsviri xarici bir CSS sənədində yerləşdirilməlidir (Opera 9. XX ilə əlaqəli problemlərin qarşısını almaq üçün). səhifənin gövdəsi. Əlbəttə ki, dəyərinə sahib bir identifikator atributunun yerləşdirilməli olduğu üst blokdan başlayacaq, məsələn divHead:
Başlıq bloku.
Əsas blok bir cüt yuvalanmış blokdan ibarət olmalıdır. Xaricinə divOut identifikatoru veriləcək və içinə divContent:
Əsas məzmun.
Altlıq divFoot-a ayarlandı:
Səhifə altbilgisi.
Addım 2
Səhifənin tam HTML kodu belə olmalıdır:
Üç blok
@import "style.css";
Bu bir başlıq blokudur.
Əsas məzmun.
Bu səhifənin altbilgisidir.
Addım 3
Stil təsviri aşağıdakı düzəliş mexanizmini həyata keçirir: orta blok (divOut) 100% hündürlüyə qoyulur, üst blok (divHead) mütləq yerləşdirmə, alt isə nisbi olacaqdır. Əsas məzmun blokunda (divContent) yuxarı hissədə başlıq bloğunun hündürlüyünə bərabər bir boşluq olmalıdır ki, səhifənin əsas məzmunu ilə üst-üstə düşməsin. Və alt blok (altbilgi) yuxarıda bu blokun hündürlüyünə bərabər olan mənfi bir haşiyə olmalıdır. Bu brauzer pəncərəsinin alt sərhədindən yuxarı qaldıracaq. Bu mexanizm aşağıdakı məzmunda bir css faylı istifadə edərək həyata keçirilə bilər: * {margin: 0; dolgu: 0}
html, gövdə {boy: 100%;} gövdə {
mövqe: nisbi;
rəng: # 000;
}
#divOut {
margin: 0;
minimum hündürlük: 100%;
arxa plan: #FFF;
rəng: # 000;
}
* html #divOut {boy: 100%;}
#divHead {
mövqe: mütləq;
sol: 0;
üst: 0;
genişlik: 100%;
hündürlük: 80px;
arxa plan: # 2F5000;
daşma: gizli;
mətnlə hizalama: mərkəz;
rəng: #FFF;
} #divFoot {
mövqe: nisbi;
aydın: hər ikisi;
margin-top: -60px;
hündürlük: 60 piksel;
genişlik: 100%;
fon rəngi: # 2F5000;
mətnlə hizalama: mərkəz;
rəng: #FFF;
}
.divContent {
genişlik: 100%;
üzmək: sol;
padding-top: 81px;
} HTML kodunda üslub cədvəli üçün göstərdiyiniz ad style.css.
