Kompyuterlar, Dasturiy ta'minot
Bir tomchi-pastga CSS Menyular qilish qanday
Bugun biz «Qanday qilib men bir tomchi-pastga CSS Menyular yaratish kerak?" Degan savolga ko'rib chiqamiz. Bu element qanday qo'shimcha mablag 'bog'lab holda amalga oshiriladi, deb birdaniga aytish kerak. Bu menyu faqat CSS va HTML bilan yaratiladi, deb.
ta'lim
to'liq maqolada unda nima tushunish uchun, siz nazariy materiallar bilan tanishish uchun bir oz kerak. Agar psevdo-sinflar bilan tanish bo'lsa, bu xat o'tish mumkin. «: So'zlashdan» Shunday qilib, bir vertikal tomchi-pastga CSS menyu yaratish uchun, biz kabi bir elementi kerak. soxta «: so'zlashdan» har qanday berilishi mumkin HTML teg. Bu siz buyum sichqonchani chiqing lahzani aniqlash imkonini beradi. «A: hover {: qizil rang;}» Masalan, biz mulkni qildik. Ushbu yozuv siz qaytsangiz, degan ma'noni anglatadi sichqoncha har qanday tegi mazmunidan qizil aylanadi. Bu psevdo-element, shuningdek, inaktive deb qayd etish lozim. Aytgancha, «: so'zlashdan» o'xshash elementlar bilan bog'liq bo'ldi. Lekin bu biz soxta CSS Ochiladigan menyu hosil bo'ladi.
ko'rsatma
Birinchidan, uning bir tomchi-pastga menyu nima tushunish qilaylik. Bu ta'rifga ostida turli tartibini qurish turli usullar ko'p oladi. Bu holda, biz bir necha doimiy aniq ob'ektlar va (yashirin) bir necha qo'shimcha iborat tuzilishini tahlil qiladi. nazariyasining bilan tugatish va amaliyotga yarataylik.
- Biz menyu yaratish. , HTML-kod etiketleme Buning uchun. ichki ro'yxatini yaratish:
-
- < / ul>. Bu kabi bir narsa sizning Ochiladigan menyuda kabi qarash lozim. CSS keyinchalik aralashishga. Bu holda asosiy ro'yxati ilova uch asosiy sohalarda va ikki iborat.
- sub menyusiga yashirish. Biz bir uslublar foydalanish, bu uchun, quyidagi xususiyatlarini aniqlash: ul ul {displey: yo'q;} Bu ekranda ikkinchi ro'yxatda elementlarini bartaraf etadi.
- , Bir menyu CSS yaratish asosiy ro'yxatidan pastga tushish. Uslublar kaskadli jadvallari quyidagi qoidani yozish: ul li: ul tomosha {displey: Blok;}. Ushbu yozuv sichqoncha ul ro'yxatda joylashgan element li, ekran ul paydo ustida bo'lsa (ilova), degan ma'noni anglatadi. Birinchi qarashda, bunday sxemasi murakkab va chalkash tuyulishi mumkin. Lekin, aslida, har bir narsa juda oddiy.
- tags
- Kontentni qo'shib, bu tartib o'zingiz foydalaning. Siz ro'yxati elementlar sonini o'zgartirish mumkin.
manzarali o'zgarishlar
Bilanoq, asosiy menyu tartibi, tayyor bo'lib, siz ro'yxatdan o'tishingiz mumkin. Ehtimol, hozir birinchi navbatda ko'p ro'yxati ob'ektni ko'rsatgan ma'lumoti qutilish uchun. Bu yagona xususiyat CSS, ya'ni ro'yxati-style-turini yordamida amalga oshiriladi. li {ro'yxati-style-turi: yo'q;} Quyidagi yozuvlar kiritish kerak. Keyin siz ramkani joylashtiring va qilishingiz mumkin fon. chegara va fon, bu bilan sizga yordam. Balki ba'zi pull-pastga menyu bir xil asosiy elementlar da itarib, qo'shimcha ro'yxatda sifatida paydo bo'ladi kabi bo'lmaydi. Buni tuzatish uchun, siz uni joylashtirish mumkin. Buning uchun, Uslublar kaskadli quyidagi kirib yozish: ul ul {lavozim: mutlaq; chap: 15px; o'ng: 15px; Top: 15px; pastki: 15px;}. Albatta, qadriyatlar Agar siz o'z foydalanadi. Agar ochiladigan menyudagi ko'rishni istasangiz qaerda qarab, CSS turli effektlarni qo'shing va bizning ro'yxatlarini bezab mumkin juda ko'p xususiyatlar taklif etadi.
xulosa
Yana bir bor bu menyu tuzumining qurilishini e'tiborga sazovordir. Misol uchun, ul ul bu voqea, ko'milgan qiymati ishlatiladi CSS qoidalarini yuklansin. Boshqa shunga o'xshash tuzilishga qondirish uchun hujjat mavjud bo'lsa, katta muammolar bo'lishi mumkin. Bunday hollarda, siz misol, sinchkovlik yoki id-identifikatorlari uchun, ma'lum bir maqsadi foydalanish lozim. Yuqoridagi maqola tartibi, tomchi-pastga menyu Umumiy dizayn tanishtirish mo'ljallangan. ish qolgan sizning zimmasidadir.
Similar articles
Trending Now