"Footer" нь ихэвчлэн вэб хуудасны зохион байгуулалтын хамгийн доод блок юм. Энэ хөлийг байрлуулахад тулгардаг хамгийн нийтлэг бэрхшээл бол хуудасны бүрэн бүтэн байдал, хөтчийн төрлөөс үл хамааран цонхны доод хэсэгт байрлуулах явдал юм. Асуудлын шийдлийг блок хэлбэрт шилжүүлэх үеэс хойш цөөн хэдэн шийдлүүд гарч ирсэн бөгөөд тэдгээрийн нэгийг доор өгөв.
Энэ нь зайлшгүй шаардлагатай
CSS ба HTML-ийн анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Хамгийн нийтлэг хуудасны байршлын схемийг үндэс болгон авч үзье. Дээд хэсэг (толгой) нь цонхны дээд ирмэг, доод хэсэг (хөл) - доод ирмэгтэй зэрэгцэж, гол (их бие) хоорондох бүх зайг үргэлж дүүргэж байх ёстой. Эх код нь XHTML 1.0 Шилжилтийн тодорхойлолтын холбоосыг агуулсан байх ёстой бөгөөд хэв маягийн тодорхойлолтыг гадна CSS файлд байрлуулах ёстой (Opera 9. XX-тэй асуудал гарахаас зайлсхийхийн тулд). Бүтцийн HTML тайлбарыг үндсэн хэсэгт байрлуулсан байх ёстой. хуудасны үндсэн хэсэг. Мэдээжийн хэрэг, дээд блокоос эхэлнэ, үүнд утгатай танигч шинж чанарыг байрлуулсан байх ёстой, жишээлбэл, divHead:
Толгойн блок.
Үндсэн блок нь үүрлэсэн хос блокоос бүрдэх ёстой. Гаднах хэсэгт divOut танигч, харин дотоод хэсэгт divContent өгөгдөнө.
Үндсэн агуулга.
Хөлийг divFoot гэж тохируулсан:
Хуудасны хөл.
Алхам 2
Хуудасны бүрэн HTML код дараах байдалтай байна:
Гурван блок
@import "style.css";
Энэ бол толгой блок юм.
Үндсэн агуулга.
Энэ бол хуудасны хөл юм.
Алхам 3
Загварын тодорхойлолт нь дараахь зохион байгуулалтын механизмыг хэрэгжүүлдэг: дунд блок (divOut) нь 100% өндөрт тохируулагдсан, дээд хэсэг (divHead) нь үнэмлэхүй байршилтай, доод хэсэг нь харьцангуй байх болно. Үндсэн агуулгын блок (divContent) дээр хуудасны үндсэн агуулгатай давхцахгүй байхын тулд гарчгийн блокийн өндөртэй тэнцүү хоосон зай байх ёстой. Доод блок (хөл) нь дээд талдаа сөрөг талтай, энэ блокийн өндөртэй тэнцүү байх ёстой. Энэ нь хөтөчийн цонхны доод хязгаараас дээш өргөх болно. Энэ механизмыг дараахь агуулгатай css файл ашиглан хэрэгжүүлж болно: * {margin: 0; дүүргэлт: 0}
html, их бие {өндөр: 100%;} их бие {
албан тушаал: харьцангуй;
өнгө: # 000;
}
#divOut {
маржин: 0;
хамгийн бага өндөр: 100%;
суурь: #FFF;
өнгө: # 000;
}
* html #divOut {өндөр: 100%;}
#divHead {
албан тушаал: туйлын;
зүүн: 0;
дээд: 0;
өргөн: 100%;
өндөр: 80px;
суурь: # 2F5000;
халих: далд;
текстийг зэрэгцүүлэх: төв;
өнгө: #FFF;
} #divFoot {
албан тушаал: харьцангуй;
тодорхой: хоёулаа;
margin-top: -60px;
өндөр: 60px;
өргөн: 100%;
арын өнгө: # 2F5000;
текстийг зэрэгцүүлэх: төв;
өнгө: #FFF;
}
.divContent {
өргөн: 100%;
хөвөх: зүүн;
дээд тал: 81px;
} HTML код дээр хэв маягийн хуудсанд зориулж оруулсан нэр бол style.css юм.
