Алхам алхмаар удирдамж
Таны навигацын цэс дээд талд эсвэл босоо эгнээний дагуу хэвтээ эгнээ байгаа эсэх нь зөвхөн жагсаалт байна. Вэб хөтөчийг төлөвлөхдөө навигацийн цэс нь зөвхөн алдартай холбоосуудын бүлэг гэдгийг мартах нь амархан байдаг. Гэхдээ хэрэв та XHTML + CSS ашиглан өөрийн навигаци хийвэл, та татаж авах (XHTML) жижиг цэсийг үүсгэх боломжтой бөгөөд CSS (CSS) өөрчлөх боломжтой.
Эхлэх
Жагсаалтыг жагсаахыг эхлүүлэхийн тулд жагсаалтыг ашиглах хэрэгтэй.
Энэ нь залуурдах гэж тодорхойлогдсон стандартад нийцээгүй жагсаалт байж болно:
Хэрвээ та HTML-г нягт нямбай харвал "Нүүр хуудас" холбоос нь таныг өөр тийзийн дугаартай болохыг анзаарах болно. Энэ нь танд уншигчид зориулсан одоогийн байршлыг таних цэс үүсгэх боломж олгоно. Та яг одоо вэбсайт дээрээ ийм төрлийн дүрс бичлэг хийх төлөвлөгөө байхгүй ч гэсэн та энэ мэдээллийг оруулж болно. Хэрвээ та сүүлд нэмэх гэж шийдсэн бол сайтад бэлтгэхийн тулд бага код бичих боломжтой болно.
Ямар ч CSS загвар байхгүй бол энэ XHTML цэс нь стандартгүй жагсаалтыг харуулдаг. Сумтай, жагсаалтын зүйлүүд нь бага зэрэг индикатор байдаг. Би эзэмшигчдийн холбоосыг ашигладаг учраас ихэнх хөтөч нь холбоосыг товчлуураар (доогуур зураастай, цэнхэр) харуулахгүй. Хэрэв та дээрх HTML-д вэб хуудсанд байрлуулбал таны навигаци дараах байдалтай байна:
- Нүүр хуудас
- Бүтээгдэхүүн
- Үйлчилгээ
- Холбоо барих
Энэ нь маш уйтгартай бөгөөд цэстэй адилхан харагдахгүй байна. Жагсаалтанд нэмсэн цөөн хэдэн CSS хэв маягтай бол та бахархалтай болгодог цэсийг үүсгэж болно.
Босоо Navigation Menu
Босоо залуурдах цэс нь энгийн хэлбэрээр дараах аргуудыг харуулснаар бичихэд маш хялбар байдаг.
Жагсаалтын зүйлс хуудсыг босоо байдлаар харуулж байна.
Би цэсний хэлбэр дүрслэхдээ би гаднаасаа эхлээд ажиллаж эхлэхийг хүсч байна. Үүнийг би эхлээд # # навигацыг хэвлээд дараа нь Ли элементүүд, дараа нь холбоосууд руу шилжиж байна гэсэн үг юм. Тэгэхээр энэ цэсэнд, Эхлээд та цэсний өргөнийг тодорхойлно. Энэ нь цэсүүдийн урт нь байсан ч гэсэн хэвийн үлдсэн хэсгийг түлхэх эсвэл хэвтээ гүйлгэх шалтгааныг үүсгэхгүй байх болно.
ul # navigation {width: 12em; }
Нэг удаа би өргөн сонголттой бол жагсаалтын зүйлстэй тоглох боломжтой. Энэ нь намайг зүйлүүдийг (сумыг салгах), дэвсгэр өнгө, хил хязгаар, текстийн чиглэл, зах хязгаарыг тогтоох боломжийг олгодог.
ul # navigation li {
жагсаалт хэв маяг: none;
суурь өнгө: # 039;
border-top: solid 1px # 039;
текст-шугам: зүүн;
margin: 0;
}
Жагсаалтын зүйлсийн үндсийг тохируулсны дараа та цэсийг холбоосын талбар хэрхэн хардаг вэ? Эхлээд хэв маягийн UL # navigation LI A, дараа нь A: холбоос, А: очсон, A: hover, болон A: идэвхтэй (хэрэв та хүсвэл). Холбоосуудын хувьд, холбоосыг блок элемент болгохыг хүсч байна. Энэ нь тэднийг LI-ийн бүхэл бүтэн орон зайг эзлэхэд хүргэдэг бөгөөд тэдгээр нь догол мөрөнд илүү тохирч байгаа тул тэдгээр нь цэс товч хэлбэрээр хэв загварыг гаргахад хялбар болгодог. Миний үргэлж хийх бусад зүйл бол зураасыг хасах (текст-чимэглэл: none;), учир нь товчнууд надад илүү товч шиг харагдах болгодог.
Мэдээжийн хэрэг, таны дизайн өөр байж магадгүй юм.
ul # navigation li a {
дэлгэц: блок;
текст-чимэглэл: none;
Доторлогоо: .25em;
хил хязгаар: хатуу 1px # 39f;
хилийн баруун: хатуу 1px # 39f;
}
Дэлгэцэнд: блок; холбоосууд дээр тохируулагдсан цэсийн бүхэл бүтэн хайрцаг нь зөвхөн үсгээр биш, дарж болдог. Энэ нь ашиглахад тохиромжтой. Хэрэв та тэдгээр нь цэнхэр, улаан, ягаан өнгөөр ялгаатай байхыг хүсвэл холбоосын өнгө (холбоос, зочилсон, хөдлөх ба идэвхтэй) тохируулахаа мартуузай.
a: холбоос, a: visited {color: #fff; }
a: hover, a: active {color: # 000; }
Би мөн өнгө төрхийг нь өөрчилж анхаарлаа төвлөрүүлээрэй.
a: hover {background-color: #fff; }
Хэрэв та босоо цэсний илүү олон жишээг хүсч байвал доорх жагсаалтаас лавлана уу.
- Stylish босоо цэс
- Үндсэн босоо цэсийн загвар
- Та энд байгаа Stylish босоо цэстэй байна
- Таны босоо үндсэн цэсийн загвар байна
Хэвтээ навигацийн цэс
Хэвтээ навигацийн цэсийг үүсгэх нь босоо навигацийн цэснээс арай илүү хэцүү байдаг. Учир нь HTML жагсаалтууд босоо байдлаар харуулахыг илүүд үздэг. Хэвтээ цэстэй адилаар эхлээд таны навигацийн цэсийн жагсаалтыг үүсгэ:
Хэвтээ цэс үүсгэхийн тулд босоо цэстэй адилхан ажиллах хэрэгтэй. Гаднаасаа эхлээд ажиллана уу. Би зүүн гар талдаа миний навигаци эхлэхийг хүсч байгаа тул би үүнийг зүүн ирмэг ба дэвсгэрийг 0 болгож тавиад зүүн тийш нь хөвнө. Та бас хүссэнээсээ илүү их эсвэл бага зай эзэлдэггүй тул өргөнийг тохируулахын тулд хэвшсэн байх ёстой. Хэвтээ цэсний хувьд энэ нь ихэвчлэн дизайны өргөний өргөн болно. Би бас уншиж, уншихад хялбар болгохын тулд бүхэл бүтэн өнгөт дэвсгэрийг нэмсэн.
ul # navigation {
float: left;
margin: 0;
Налуу: 0;
өргөн: 100%;
суурь өнгө: # 039;
}
Гэхдээ хэвтээ навигацийн цэсний нууц жагсаалтыг жагсаасан зүйлсийн жагсаалтад оруулав. Жагсаалтын зүйлүүд нь ихэвчлэн элементүүдийг хаах бөгөөд энэ нь тэдгээрийн өмнө болон дараа байрлуулсан шинэ шугамтай байх болно гэсэн үг юм. Блокоос бин руу харуулсан дэлгэцийг тоогоор сольж, жагсаалтын элементүүдийг өөр хэвтээ чиглэлд байрлуулахыг шаарддаг.
ul # navigation li {display: inline; }
Би тэдгээрийг ижил өнгөтэй, текстийн чимэглэл бүхий босоо навигацын цэс дээр үзүүлж байсан холбоосуудаа яг адилхан болгосон. Би дээшээ ирэхэд товчлууруудыг нь тодруулахын тулд дээд хилийг нэмсэн. Миний арилгасан цорын ганц зүйл бол дэлгэцийн хэсэг юм: блок; Ингэснээр шинэ мөрүүдийг буцааж хэвтээ цэсийг устгах болно.
ul # navigation li a {
текст-чимэглэл: none;
дэвсгэр: .25м 1ем;
хил хязгаар: хатуу 1px # 39f;
border-top: solid 1px # 39f;
хилийн баруун: хатуу 1px # 39f;
}
a: холбоос, a: visited {color: #fff; }
ul # navigation li a: hover {
background-color: #fff;
өнгө: # 000;
}
Та энд Байршлын мэдээлэл байна
HTML-ийн өөр нэг тал бол таныг танигч байна. Хэрэв та цэсээ өөрчлөхийг хүсч байгаа бол хэрэглэгчдийн одоогийн байршлыг зааж өгөхдөө өөр өөр дэвсгэр өнгө эсвэл бусад загварыг тодорхойлохын тулд энэ ID-г ашиглаарай. Энэ ID-ын шинж чанарыг бусад хуудсан дээрх зөв цэс рүү зөөхийн тулд одоогийн хуудсыг үргэлж тодруулдаг.
ul # navigation li # youarehere a {background-color: # 09f; }
Хэрэв та эдгээр хэв маягийг хуудасныхаа хамт нэгтгэх юм бол, та өөрийн сайттай ажилладаг хэвтээ эсвэл босоо цэсийг үүсгэж болох боловч татаж авахад хурдан, ирээдүйд шинэчлэхэд тун хялбар болно. XHTML + CSS ашиглах нь таны жагсаалтыг маш хүчирхэг хэрэгсэл болгон хувиргах.
Хэрвээ та хэвтээ цэсний илүү олон жишээ хүсвэл дараах зүйлсийг анхаар.
- Хэвтээ Хэвтээ цэс
- Хэвтээ үндсэн цэсийн загвар
- Таны хэвлэсэн хэвтээ хэвтээ цэс
- Хэвтээ цэс Хэвтээ цэсний загвар Та энд байна