01dan 06gacha
CSS bilan sekreterli navigatsiya qanday yaratiladi va rasm yo'q
Veb-sahifalardagi navigatsiya - bu ro'yxatning shakli va sekundli navigatsiya gorizontal ro'yxatga o'xshaydi. CSS bilan gorizontal sekund navigatsiya yaratish juda oson, biroq CSS 3 bizni yanada go'zalroq qilish uchun yana bir necha vositalarni beradi.
Ushbu dars sizga CSS-ning sekstenli menyusi yaratilishi uchun kerak bo'lgan HTML va CSS orqali o'tadi. Qanday ko'rinishini ko'rish uchun ushbu havolani bosing.
Ushbu sekmeli menyu hech qanday tasvirni , faqat HTML va CSS 2 va CSS 3 foydalanadi. Buning uchun qo'shimcha tablarni kiritish yoki ulardagi matnni o'zgartirish uchun osongina tahrir qilish mumkin.
Brauzerni qo'llab-quvvatlash
Ushbu tab menyu barcha asosiy brauzerlarda ishlaydi . Internet-brauzer yuvarlatilgan burchaklarni ko'rsatmaydi, aks holda u Firefox, Safari, Opera va Chrome kabi yorliqlarni namoyish etadi.
02 of 06
Menyuning ro'yxatini yozing
Barcha navigatsiya menyuslari va yorliqlari, albatta, tartibga solinmagan ro'yxat. Shunday qilib, siz xohlagan birinchi narsa sizning tabrikli navigatsiyangizning qayerga o'tishini xohlagan joyga yo'nalishlarning tartibsiz ro'yxatini yozish.
Ushbu qo'llanma siz HTMLni matn tahrirlagichida yozmoqdasiz va veb-saytingizdagi menyudagi HTML joylashishni bilasiz.
O'zingizga xos bo'lmagan ro'yxatni shunday yozing:
- class = "tablist">
- CSS 3
- id = "joriy"> yorliqlar
- Uchun
- Menyular
Siz kod ikkita narsani chaqirayotganini ko'rasiz: class = "tablist" va id = "current". Birinchisi talab qilinadi . Agar siz tablistlar ro'yxatini o'zingizning ro'yxatingizga kiritmasangiz, yorliqlar ishlamaydi. Ikkinchisi ixtiyoriy. Id = "joriy" sahifasini qaysi sahifaga ajratib olishni xohlaysiz? Odatda men buni men foydalanadigan sahifani ta'kidlash uchun ishlataman, lekin siz uni eng muhim yorliqni ta'kidlash uchun ishlatishingiz mumkin. Yoki uni butunlay olib tashlashingiz mumkin.
03 ning 06
Uslublar jadvalini tahrirlashni boshlang
Siz tashqi uslublar jadvalini yoki ichki uslublar jadvalidan foydalanishingiz mumkin . Namuna menyusi sahifa hujjatning
Avval UL O'zini Uslub qilamiz
Bu erda biz class tablist dan foydalanamiz .in HTML. UL yorlig'ini yaratishdan ko'ra, siz sahifangizdagi barcha tartiblangan ro'yxatlarni targ'ib qiladi, siz faqat UL sinfini tarbiyalashingiz kerak. Shunday qilib, sizning CSS-dagi birinchi kirish:
.tablist {}Men oxirigacha jingalak kostyumni (}) qo'yishni yoqtiraman, shuning uchun uni keyinchalik unutmayman.
Biz yorliqlar menyusi ro'yxati uchun tartiblanmagan ro'yxat tegini ishlatmoqchi bo'lsak-da, ammo biz biron-bir o'q yoki raqamni surib qo'yishni xohlamaymiz. list-style: none; Bu brauzerda ro'yxat mavjud bo'lsa-da, bu oldindan belgilangan uslublar (o'q yoki raqamlar kabi) bo'lmagan ro'yxat.
So'ngra, ro'yxatning balandligini to'ldirishni xohlagan joyga mos keladigan qilib belgilashingiz mumkin. Men balandligim uchun 2-rasmni tanladim, chunki bu shriftning ikki barobar kattaligiga teng va yorliq matnining yuqorisida va pastki qismida yarim baravar oshadi. balandligi: 2em; Lekin kengligingizni xohlagan hajmga sozlashingiz mumkin. UL teglari avtomatik ravishda kengligining 100 foizini egallaydi, shuning uchun siz hozirgi konteynerdan kichikroq bo'lishini istamasangiz, kenglikni tashqariga chiqarib qo'yishingiz mumkin.
Va nihoyat, agar sizning usta uslublar varaqangiz UL va OL taglari uchun oldindan belgilanmagan bo'lsa, ularni joylashtirishni xohlaysiz. Bu siz UL'ingizda chegaralarni, chekka chiziqlarni va to'ldirishni o'chirishingiz kerak degan ma'noni anglatadi. padding: 0; margin: 0; chegara: yo'q; UL yorlig'ini asl holatini o'zgartirgan bo'lsangiz, marjinalarni, paddingni yoki chegarani o'zingizning dizayni bilan mos keladigan biror narsaga o'zgartirishingiz mumkin.
Sizning oxirgi .tablist klassi shunday bo'lishi kerak:
.tablist {list-style: none; balandligi: 2em; padding: 0; margin: 0; chegara: yo'q; }04 of 06
LI ro'yxati narsalarini tahrirlash
O'zingiz belgilagan ro'yxatni ko'rsatganingizdan so'ng, uning ichida LI teglarini tarashingiz kerak. Aks holda, standart ro'yxat kabi harakat qiladi va yorliqlarni to'g'ri joylashtirmasdan har bir keyingi satrga o'tadi.
Birinchidan, uslubingiz xususiyatini sozlang:
.tablist li {}So'ngra siz yorliqlarni gorizontal tekislikda joylashtirish uchun suzib yurishni xohlaysiz. float: chap;
Yorliqlar orasidagi cheklovni qo'shishni unutmang, shuning uchun ular birlashtirilmaydi. margin-right: 0.13em;
Sizning li uslublaringiz shunday bo'lishi kerak:
.tablist li {float: chap; margin-right: 0.13em; }05 of 06
Yorliqlar CSS-ga ega tablar kabi ko'rinadi 3
Ushbu uslublar jadvalidagi og'ir o'chirishni bajarish uchun men tartiblangan ro'yxatdagi havolalarni yo'naltiraman. Brauzerlar ushbu linklarni veb-sahifada boshqa teglardan ko'ra ko'proq qilishini bilishadi, shuning uchun agar siz ularni anchor tegiga (havolalar) biriktirsangiz, hover davlatlari kabi narsalarga mos kelish uchun eski brauzerlarni olish osonroq. Avval sizning uslublaringiz xususiyatlarini yozing:
.tablist li a {} .tablist li a: hover {}Ushbu yorliqlar ilovadagi yorliqlar kabi harakat qilishlari kerakligi sababli, tabning butun maydoni faqat bog'langan matnni emas, balki tıklanabilir bo'lishi kerak. Buning uchun A tegini normal " inline " holatidan blok elementiga aylantirish kerak . displey: blok; (Agar farq haqida ko'proq bilishni xohlasangiz, Blok-satr va Inline Elements-ni o'qib chiqing.)
So'ngra, yorliqlaringizni bir-biriga nosimmetrik bo'lishga majburlashning oson yo'li, ammo matnning kengligini moslash uchun hali ham moslashtirilgan, o'ng va chapga bir xil to'ldirish kerak. Ustki va pastki qismini 0 ga, o'ng va chapni esa 1 me'yorga o'rnatish uchun to'ldirish stenografini ishlatdim. to'ldirish: 0 1em;
Bundan tashqari, yorliqlar havolalarga kamroq o'xshab qolmasligi uchun havolani chizib tashlashni tanladim. Agar tinglovchilaringiz buni chalkashtirib yuborsa, bu qatorni qoldiring. link-bezatish: yo'q;
Yorliqlar atrofida nozik chegara qo'yib, ularni yorliqlarga o'xshash qiladi. Chegarani chegara to'rt tomonning chegarasiga qo'yish uchun chegara stenografini va mulkini ishlatardim: 0.06em qattiq # 000; Keyin pastki qismdan pastki qismini olib tashlash uchun chegara pastki xususiyatidan foydalanildi. chegara pastki: 0;
So'ngra yorliqlarning shrift turini, rangi va fon rangini o'zgartirishga muvaffaq bo'ldim. Buni saytingizga mos uslublarga o'rnating. harflarning: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; rang: # 000; fon-rang: #ccc;
Yuqoridagi barcha uslublar selektorga o'tishlari kerak .tablist li a, qoidalar, ular umuman olganda çapa teglariga ta'sir qiladi. Keyin yorliqlarni ko'proq tıklanabilir qilish uchun, bir necha davlat qoidani kiritishingiz kerak .tablist li a: hover.
Sichqoncha ustida sichqonchani ochish uchun matn va fon rangini o'zgartirishni yoqtiraman. fon: # 3cf; rang: #fff;
Brauzerlarga havola qilinmagan holda qolishni xohlagan boshqa bir eslatma ham kiritilgan. matnni bezash: yo'q; Yana bir keng tarqalgan usul - yorliqni sichqonchani suring, chizilgan chiziqni qaytarish. Agar buni qilishni xohlasangiz, matnni bezatish uchun o'zgartiring: chizilgan;
Lekin CSS 3 qaerda?
Agar diqqatni jalb qilsangiz, ehtimol stil sahifasida hech qanday CSS 3 uslubi ishlatilmaganligini sezgansiz. Internet brauzerida, jumladan, Internet-brauzerida ishlashning afzalligi. Biroq, bu yorliqlarni kvadrat qutilarga qaraganda ko'proq o'xshamaydi. CSS-3 uslubidagi chegara radiusi (va brauzerga mos keladigan qo'ng'iroqlar) qo'shib, qirralarning yaxlitlashini, manila jildidagi yorliqlarga o'xshashligini ko'rishingiz mumkin.
.tablist qoidasiga qo'shiladigan uslublar: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50 o'g; -moz-chegara-radius-ustki: 0.50; -moz-chegara-radius-topleft: 0.50; chegara yuqori o'ng radiusi: 0.50; chegara-tepalik-chap radiusi: 0.50;
Men yozgan so'nggi uslub qoidalari quyidagilardir:
.tablist li a {displey: blok; to'ldirish: 0 1em; matnni bezash: yo'q; chegarasi: 0.06em qattiq # 000; chegara pastki: 0; harflarning: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; rang: # 000; fon-rang: #ccc; / * CSS 3 elementlari * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-radius: 0.50 o'g; -moz-chegara-radius-ustki: 0.50; -moz-chegara-radius-topleft: 0.50; chegara yuqori o'ng radiusi: 0.50; chegara-tepalik-chap radiusi: 0.50; } .tablist li a: hover {fon: # 3cf; rang: #fff; matnni bezash: yo'q; }Ushbu uslublar yordamida siz barcha asosiy brauzerlarda ishlaydigan va CSS 3 muvofiq brauzerlarda yaxshi bosilgan yorliqlarga o'xshab sekmeli menyuga egasiz. Keyingi sahifada siz uni yanada ko'proq jihozlash uchun foydalanishingiz mumkin bo'lgan yana bir variantni taqdim etadi.
06 of 06
Joriy yorliqni ajratib ko'rsatish
Yaratgan HTML-da UL identifikatori bilan bitta ro'yxat elementi mavjud edi. Bu sizning LI'ingizni qolganlardan boshqacha uslubda berishga imkon beradi. Eng keng tarqalgan holat - joriy tabni qandaydir tarzda ajratish. Buni tasavvur qilishning yana bir usuli - siz yashamaydigan yorliqlarni kulrang qilishni xohlaysiz. Keyin idning turli sahifalarda joylashgan joyini o'zgartirasiz.
Har ikkalasi ham bir-biridan farqli bo'lishi uchun #qolim A tegini va ayni paytda #current A: hover sta uslubini xohlayman. Siz rangi, fon rangi, hatto bu elementning balandligi, kengligi va to'ldirishini o'zgartirishingiz mumkin. Dizayningizda har qanday o'zgarishlarni amalga oshiring.
.tablist li # joriy {fon-rang: # 777; rang: #fff; } .tablist li # joriy a: hover {fon: # 39C; }Va tugadi! Siz faqat veb-saytingiz uchun sekmeli menyu yaratdingiz.