Хуудасны байршлын хамгийн доод хэвтээ блокыг ихэвчлэн "хөл" гэж нэрлэдэг. Хуудасны бусад блокуудын нэгэн адил дизайны элементүүдийг байрлуулсан боловч бусад блокуудаас ялгаатай нь энэ блокийг байрлуулахтай холбоотойгоор тодорхой асуудал гардаг. Эдгээр нь өөр өөр хөтөч CSS хэлний стандартыг өөр өөрөөр ойлгодог бөгөөд хөлийн хөтөч цонхны доод ирмэг дээр байрлуулах нь нэлээд төвөгтэй байдагтай холбоотой юм. Энэ асуудлыг шийдэх шийдлүүдийн нэгийг доор харуулав.
Шаардлагатай
CSS ба HTML-ийн анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Хуудасны эх кодын эхний мөрөнд XHTML 1.0 Шилжилтийн техникийн тодорхойлолтыг байрлуулна уу:
Алхам 2
Хуудасны бүтцийн үндсэн блокуудыг баримт бичгийн их биен дотор байрлуулна уу (ба шошго хооронд). Үндсэн агуулгыг байрлуулах блок нь хоёр үүрлэсэн давхаргаас бүрдэх ёстой. Жишээлбэл, гадна талд нь OuterDiv танигч, харин дотор талд нь InnerDiv танигч байг.
Энэ бол хуудасны үндсэн агуулга байх болно.
Тэдний ард таних тэмдэг бүхий хөлийн блок байрлуул, жишээлбэл, FooterDiv:
Хуудасны хөл.
Алхам 3
HTML кодын толгой хэсэгт (ба шошгоны хооронд) CSS-ийн хэв маягийн тодорхойлолттой гадаад файлын холбоосыг байрлуулна уу.
@import "footerStyle.css";
Алхам 4
Мастер хуудасны бүрэн кодыг html өргөтгөлтэй файлд хадгална уу. Энэ нь иймэрхүү харагдаж магадгүй юм:
Дарагдсан хөл
@import "footerStyle.css";
Энэ бол хуудасны үндсэн агуулга байх болно.
Хуудасны хөл.
Алхам 5
Загварын хүснэгтийн файлыг үүсгээрэй - энэ нь CSS өргөтгөл болон HTML кодонд заасан нэрийн хамт хадгалагдах ёстой энгийн текст файл юм (footerStyle.css). Энэ файлд хуудсанд ашигласан блокуудын дараахь загварын тайлбарыг бичнэ үү.
* {маржин: 0; дүүргэлт: 0}
html, их бие {өндөр: 100%;}
бие {
албан тушаал: харьцангуй;
өнгө: # 222222;
}
#OuterDiv {
маржин: 0;
хамгийн бага өндөр: 100%;
дэвсгэр: # ааааааа;
өнгө: # 222222;
}
* html #OuterDiv {өндөр: 100%;}
#FooterDiv {
албан тушаал: харьцангуй;
тодорхой: хоёулаа;
margin-top: -60px;
өндөр: 60px;
өргөн: 100%;
дэвсгэр өнгө: DarkBlue;
текстийг зэрэгцүүлэх: төв;
өнгө: #eeeeff;
}
. InnerDiv {
өргөн: 100%;
хөвөх: зүүн;
}
