Цэсийг сайтын хэсгүүдээр дамжуулан хэрэглэгчийн навигацийг хөнгөвчлөхөд ашигладаг. Зочдын анхаарлыг татахын тулд цэс нь ажиллагаатай, хэрэглэхэд хялбар байх ёстой бөгөөд нэгэн зэрэг бүх нөөцийн дизайнтай хослуулах хэрэгтэй.
Зааварчилгаа
1-р алхам
Цэс үүсгэхээсээ өмнө түүний төрлийг шийдээрэй. Та хулганаар курсороор гүйлгэх үед хэрэглэгчид харуулах уналтын хэвтээ эсвэл босоо хайрцгийг үүсгэж болно. Тодорхой цэсийг сонгохдоо зочдод үүнийг ашиглахад хэр тохиромжтой байх, дизайнтай хэрхэн хослуулахыг зааж өгч болно.
Алхам 2
Цэсийн төрлийг сонгосны дараа HTML засварлахдаа ашигладаг текст засварлагчийг ашиглан хуудасныхаа файлыг нээнэ үү. Интерфэйсийн элементээ оруулахыг хүссэн кодын хүссэн хэсэг рүү очно уу.
Алхам 3
Үүний дараа блок үүсгэж, түүнд оноогдсон дугаар бүхий дугаарлагдсан жагсаалтыг гаргаж сонголтуудын жагсаалтыг гарга. Жишээлбэл:
- Холбоос 1
- Холбоос 2
- Холбоос 3
Энэ жишээнд би гурван элементийн сумтай жагсаалтыг гаргаж, ID panel ID-тай div давхаргад байрлуулсан.
Алхам 4
Хуудасныхаа хэсгийн блок руу ороод тохирох каскадын загварын хуудасны цэсийг үүсгээрэй. Хэрэв та хэвтээ цэс үүсгэхийг хүсвэл жагсаалтад багтсан атрибут оруулах боломжтой.
#panel ul li {дэлгэц: inline; }
Алхам 5
Хуудасны бүх уртын дагуу хэвтээ шугам үүсгэхийн тулд та дараах кодыг ашиглаж болно.
#panel ul {захын зүүн: 0; дүүргэлт: 2х 0; }
Алхам 6
Дараа нь та харааны хуваагдлыг тэгш өнцөгт болгон хувааж болно.
#panel ul li a {margin-left: 3px; хил: 1px; дүүргэлт: 2х3хх; дэвсгэр: цэнхэр; }
Энэ код нь захын зүүн ба дүүргэлтийн шинж чанаруудаар дамжуулан хилийн элементүүдээс текстийн догол мөрийг тохируулахаас гадна жагсаалтын зүйл тус бүрийн дэвсгэр өнгийг тохируулна. Энэ жишээнд өнгө нь цэнхэр боловч та үүнийг өөрийн үзэмжээр өөрчилж болно.
Алхам 7
Таб дээр сонгосон одоогийн хуудсан дээрх зүйлийг зааж өгөхийн тулд тохирох параметрүүдийг нээлттэй ангид тохируулна уу.
#menu ul li a # open {background: red; хилийн доод хэсэг: 1px; }
Самбараас сонгосон одоогийн хуудсыг одоо улаанаар харуулах болно.
Алхам 8
Өөрчлөлтийг файлд хадгалж, хөтөчөөр дамжуулан хуудсаа нээж бичсэн кодын ажиллагааг шалгана уу. Дэлгэцийн нэмэлт сонголтуудыг тохируулахын тулд та объектын дүр төрхийг сайжруулахын тулд үргэлж CSS эсвэл HTML нэмж болно.
