Унтраах сайхан цэсийг зөвхөн JavaScript дээр төдийгүй стандарт HTML хаягуудыг ашиглан үүсгэх боломжтой. Унтраах цэсийг бий болгох энэхүү арга нь сайт үүсгэх анхны алхамаа эхлүүлж байгаа бөгөөд хуудсан дээр цэс үүсгэх ажлыг хялбарчлахыг хүсч буй хүмүүст ашигтай байх болно.
Зааварчилгаа
1-р алхам
HTML кодод ийм цэс нь дотор нь үүрлэсэн жагсаалттай жагсаалтгүй жагсаалт юм. Эхлэхийн тулд style.css файлыг үүсгээд дараах CSS кодыг хуулж, хэлбэржүүлээд цэсийг форматлана уу:
#nav, #nav ul {
жагсаалтын хэв маяг: байхгүй;
маржин: 0;
дүүргэлт: 0;
хил: 1px хатуу # 000;
суурь: # 515151;
хөвөх: зүүн;
өргөн: 100%;
}
#nav li {
хөвөх: зүүн;
албан тушаал: харьцангуй;
арын өнгө: # 003366;
back / ground: none; байхгүй;
}
#nav li ul {
дэлгэц: байхгүй;
албан тушаал: туйлын;
арын өнгө: # 003366;
дүүргэлт: 8px 0;
өргөн: 138px;
}
Алхам 2
Одоо бид цэсийн зүйлүүдэд зарим чимэглэлийг нэмэх хэрэгтэй. Тэдгээрийн өргөн ба өндрийг тодорхойлж, доогуур зураасыг арилгаж, холбоос тус бүрт тодорхой өргөн тохируулж, хүссэн дэвсгэр өнгийг зааж өгнө.
Алхам 3
Эдгээр бүх өөрчлөлтүүдийн хувьд дараах кодыг файлд нэмнэ үү.
#nav a {
өнгө: #fff;
текст чимэглэл: байхгүй;
дэлгэц: блок;
өргөн: 120px;
дүүргэлт: 4px 10px;
арын өнгө: # 003366 давтагдах-зөв;
}
#nav a: hover {
өнгө: # 000;
арын өнгө: # 0033FF;
}
#nav li: hover {
арын өнгө: # 333333;
}
Дараа нь цэсийг дуусгахын тулд дараах кодыг нэмнэ үү.
#nav li: hover li ul {
дэлгэц: байхгүй;
өргөн: 138px;
дээд: -9px;
зүүн: 133px;
}
#nav li: hover li: hover ul {
дэлгэц: блок;
}
Алхам 4
HTML хувилбарт ерөнхий эмх цэгцгүй цэсийн жагсаалт иймэрхүү харагдаж байна. Үүний үндсэн дээр нийтлэлд дурдсан цэсийг үүсгэсэн болно.
- Нүүр хуудас
-
Каталог
-
Бүх бүтээгдэхүүн
- Огноогоор
- Үйлдвэрлэгчид
- Бусад
-
