Хуудасны хөлийн хэсгийг ("хөл") цонхны доод хязгаарт хэрхэн яаж хийх вэ - энэ нь сайтын хуудасны зохион байгуулалтын хамгийн нийтлэг асуудал юм. Мэдээжийн хэрэг шийдэл байдаг бөгөөд тэдгээрийн хэд нь байдаг. Агуулгын хэмжээ, хөтчийн төрлөөс үл хамааран хөлийн хуудсыг хуудасны доод талд үргэлж дарж байхыг баталгаажуулах нэг арга замыг доор харуулав.
Энэ нь зайлшгүй шаардлагатай
CSS ба HTML-ийн анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Жишээлбэл, ердийн хуудаслалтын схемүүдийн нэгийг жишээ болгон авч үзье. Энэ нь мансарда (толгой), гол блок, хөлийн хэсэгтэй байх болно. Мэдээжийн хэрэг, хэрэв шаардлагатай бол та үндсэн блокт хэд хэдэн багана байрлуулж болох боловч бид үүнийг хийхгүй, зөвхөн хөлийн байрлалыг байрлуулахгүй байх тал дээр анхаарлаа хандуулах болно. Хуудасны HTML код нь тодорхойлолтыг зарласнаас эхэлнэ.
Шошгоны хооронд ба хуудасны гарчгаас гадна бид кодчилолын заалтыг байрлуулна: Мөн хэв маягийн тодорхойлолтыг агуулсан гадаад CSS файлын холбоос: @import "styles.css"; Бид байрлуулахгүй 9-р хувилбарын Opera хөтөч дээр хүндрэл гарахаас зайлсхийхийн тулд стилийг хуудасны html-код руу шууд дүрслэх. Хуудсын хооронд байрлуулах, хуудасны блок бүтцийг байрлуулах. Эхнийх нь мэдээж гарчгийн блок юм. Энэ блокийн хэв маягийг тохируулахын тулд бид толгойн танигчийг өгөх болно.
Энэ толгой үргэлж цонхны дээд талд байдаг.
Дараа нь - хуудасны гол блок. Энэ нь гаднах (танигч - гаднах) ба дотоод (танигч - гаднах боодол) гэсэн хоёр үүрээс бүрдэнэ.
Энэ бол гол хэсэг юм.
Эцэст нь хөл:
Энэ бол хөл юм - цонхны ёроолд үргэлж байдаг!
Бүрэн хуудас нь иймэрхүү харагдах болно:
Хөлийг хэрхэн дарах вэ
@import "styles.css";
Энэ толгой үргэлж цонхны дээд талд байдаг.
Энэ бол гол хэсэг юм.
Энэ бол хөл юм - цонхны ёроолд үргэлж байдаг!
Алхам 2
Одоо загварын хүснэгтийн агуулга руу шилжье. Энэ нь дараахь схемийг хэрэгжүүлдэг: хуудасны үндсэн блокыг 100% өндөрт тохируулж, гарчгийг нь бүрэн байрлуулж, хөлийн хэмжээ харьцангуй байх болно. Гарчгийг хуудасны үндсэн агуулгатай давхцуулахгүйн тулд энэ үндсэн агуулгыг үндсэн хайрцгийн доторх нэмэлт хайрцагт байрлуулж, энэ нэмэлт хайрцгийг гарчгийн хайрцагны өндөртэй тэнцүү дээд хязгаарт тохируулна. Хөл хэсэгт түүний өндөртэй тэнцэх сөрөг дээд ирмэгийг өгдөг бөгөөд ингэснээр энэ нь цонхны доод ирмэгээс бүх өндрөөрөө дээш өргөгдөнө. CSS файлын бүрэн агуулга: * {margin: 0; дүүргэлт: 0}
html, их бие {өндөр: 100%;} их бие {
өнгө: хар;
албан тушаал: харьцангуй;
}
# гадаа {
хамгийн бага өндөр: 100%;
маржин: 0;
дэвсгэр: цагаан;
өнгө: хар;
} * html #outer {өндөр: 100%;}
# толгой {
албан тушаал: туйлын;
дээд: 0;
зүүн: 0;
өргөн: 100%;
өндөр: 70px;
суурь: # 304a00;
халих: далд;
өнгө: цагаан;
текстийг зэрэгцүүлэх: төв;
} # хөлбөмбөг {
албан тушаал: харьцангуй;
margin-top: -50px;
тодорхой: хоёулаа;
өргөн: 100%;
өндөр: 50px;
арын өнгө: # 304a00;
өнгө: цагаан;
текстийг зэрэгцүүлэх: төв;
}
.outerwrap {
хөвөх: зүүн;
өргөн: 100%;
дээд тал: 71px;
} Энэ файлыг бид хуудасны html кодонд заасан нэрээр хадгалах ёстой - styles.css.
