Сайн HTML код болон энгийн CSS дүрмүүдийн тусламжтайгаар та амархан өөрчилж, нөхөж болохуйц сайхан цэстэй цэсийг үүсгэх боломжтой. Тэмдэглэгээний хэл болон Cascading Style Sheets-ийг ашигласнаар та бүх хөтөч дээр цэс зөв ажиллах боломжтой болно.
Зааварчилгаа
1-р алхам
Нэгдүгээрт, цэснийхээ үндсэн бүтцийг байгуул. Текст засварлагчийг нээж, эцэг эхийн жагсаалтын зүйлийн үүргийг гүйцэтгэдэг дэд цэсээр дугаарласан жагсаалт үүсгээрэй. Жишээлбэл:
-
Эхний элемент
- Буулгах зүйл
- Унах2
Алхам 2
Үүсгэсэн жагсаалтыг тусдаа HTML файлд хадгална уу. Дараа нь.css өргөтгөлтэй файл үүсгээд бүх загварын хуудасны параметрүүдийг оруулна уу.
Алхам 3
Сумны жагсаалтад багтсан дэвсгэр, сумыг арилгаж, CSS хэрэгслийг ашиглан цэсний өргөнийг тохируулна уу: ul {list-style: none;
өргөн: 200px; }
Алхам 4
Байршлын шинж чанарыг ашиглан жагсаалтад байгаа бүх зүйлийн харьцангуй байрлалыг тохируулна уу: ul li {position: харьцангуй; }
Алхам 5
Дараа нь та дэд цэс зохиох хэрэгтэй бөгөөд элемент тус бүр нь хулганы заагч дээр байрлах мөчид эх цэсний баруун талд гарч ирнэ: li ul {position: absolute;
зүүн: 199px;
дээд: 0;
дэлгэц: байхгүй; } Зүүн атрибут нь цэсний өргөнөөс нэг пикселээр бага байна. Энэ нь попап цонхыг давхар хүрээ үүсгэхгүйгээр ухаалгаар байрлуулах боломжийг олгоно. Дэлгэцийн шинж чанар нь хуудсыг нээхэд дэд цэсийг нуухад ашиглагддаг.
Алхам 6
Тохирох css тохиргоог ашиглан холбоосыг хүссэн хэлбэрээр загварчлах. Дэлгэцийг блоклох параметрийг оруулна уу, ингэснээр холбоос бүр түүнд зориулагдсан бүх зайг эзэлнэ.
Алхам 7
Курсор дуусах мөчид цэс гарч ирэхийн тулд (hover) код оруулах шаардлагатай: li: hover ul {display: block; }
Алхам 8
Холбоосыг харуулах нэмэлт сонголтыг тохируулж, хүссэн зүйлсийн жагсаалтыг оруулна уу.
Алхам 9
Гарч ирэх цэс бэлэн боллоо. Одоо шинж чанарыг.html файлд оруулах шаардлагатай хэвээр байна: Попап цэс
