Сайтын хуудсан дээр унах цэсийг зай хэмнэх, вэб нөөцийн бүтцийн логик танилцуулга хийхэд ашигладаг. Энэ элементийг хэрэгжүүлэх олон арга зам байдаг бөгөөд хамгийн энгийн нэгийг доор өгөв.
Энэ нь зайлшгүй шаардлагатай
HTML ба CSS хэлний анхан шатны мэдлэг
Зааварчилгаа
1-р алхам
Цэсний HTML код нь хуудасны холбоосыг байрлуулсан үүрний жагсаалтын элементүүдийг (UL ба LI) ашигладаг. Энэ нь нарийн төвөгтэй бүтэц агуулаагүй болно. Динамикийг CSS-ийн тусламжтайгаар хэрэгжүүлдэг бөгөөд түүний тайлбарлах хуудсыг хуудасны эх кодод шууд байрлуулдаг. Энэ талаар онцгой зүйл байхгүй, үүнээс гадна текст нь тодорхой хэв маягийн блокуудын зорилгын талаархи зарим тайлбарыг агуулдаг.
Алхам 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitions // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Доош урсдаг цэс * {
фонт-гэр бүл: Вердана;
үсгийн хэмжээ: 14px;
} ul, li, a {
дүүргэлт: 0;
дэлгэц: блок;
хил: 0;
маржин: 0;
} ul {
хил: 1px хатуу #AAA;
өргөн: 150px;
жагсаалтын хэв маяг: байхгүй;
суурь: #FFF;
} li {
арын өнгө: #AAA;
албан тушаал: харьцангуй;
z-индекс: 9;
дүүргэлт: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
албан тушаал: туйлын;
дээд: 5px;
зүүн: 111px; / * IE хөтчүүдэд зориулсан * /
}
li.folder> ul {left: 140px;} / * бусад хөтөчдөд зориулсан * / a {
дүүргэлт: 2px;
хил: 1px хатуу #FFF;
текст чимэглэл: байхгүй;
өргөн: 100%; / * IE хөтчүүдэд зориулсан * /
өнгө: # 000;
үсгийн жин: тод;
}
li> a {width: auto;} / * бусад хөтөчдөд зориулж * / li a {
өргөн: 140px;
дэлгэц: блок;
} li a.submenu {
дэвсгэр өнгө: шар;
} / * Холбоосууд * /
a: hover {
хилийн өнгө: саарал;
арын өнгө: # FF0000;
өнгө: хар;
}
li. хавтас a: hover {
арын өнгө: # FF0000;
} / * Фолдерууд * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Хуудас
-
2. Хавтас
- 2.1 Хуудас
-
2.2 Фолдер
- 2.2.1 Хуудас
- 2.2.2 Хуудас
- 2.2.3 Хуудас
- 2.3 Хуудас
-
3. Хавтас
- 3.1 Хуудас
- 3.2 Хуудас
- 3.3 Хуудас
- 4. Хуудас
Алхам 3
Та энэ кодод Internet Explorer хөтөчүүдийн хуучин хувилбаруудад дэмжлэг үзүүлэх боломжтой бөгөөд үүнийг JavaScript (Peter Nederlof) ашиглан хэрэгжүүлдэг. Та файлыг шаардлагатай кодоор татаж авах хэрэгтэй, жишээлбэл, энэ холбоосоос - https://peterned.home.xs4all.nl/htc/csshover3.htc. Энэ нь үндсэн хуудастай ижил хавтсанд байрлуулсан байх ёстой. Үндсэн хуудасны хэв маягийн тодорхойлолтонд холбоосыг нэмж оруулаарай. Нээлтийн хэв маягийн дараа шууд байрлуулж болно: / * хуучин IE хөтчүүдэд зориулсан *
body {behavior: url ("csshover3.htc");}
