01 iš 06
Kaip sukurti skirtukų naršymą su CSS ir be vaizdų
Naršymas tinklalapiuose yra sąrašo forma, o naršymas skirtukais yra kaip horizontalus sąrašas. Gana lengva sukurti horizontalią navigaciją su skirtukais naudojant CSS, bet CSS 3 suteikia mums dar keletą įrankių, kad jie atrodytų dar gražiau.
Šioje pamokoje pateikiamas HTML ir CSS, kurių reikia CSS skirtukų meniu sukurti. Spustelėkite šią nuorodą, kad pamatytumėte, kaip ji atrodys.
Šiame skirtukų meniu nėra jokių vaizdų , tik HTML ir CSS 2 ir CSS 3. Jį galima lengvai redaguoti, jei norite pridėti daugiau skirtukų arba pakeisti jų tekstą.
Naršyklės palaikymas
Šis skirtuko meniu dirbs visose pagrindinėse naršyklėse . Internet Explorer nebus rodomas suapvalintas kampas, bet kitaip jis parodys skirtukus panašiai kaip "Firefox", "Safari", "Opera" ir "Chrome".
02 iš 06
Parašykite savo meniu sąrašą
Visi navigacijos meniu ir skirtukai iš tiesų yra netvarkingi sąrašai. Taigi pirmas dalykas, kurį norite padaryti, yra parašyti netvarkingą nuorodų sąrašą, į kurį norėtumėte pereiti iš navigacijos skirtuko.
Šioje pamokoje daroma prielaida, kad rašote savo HTML teksto redaktoriuje ir žinote, kur įdėti HTML savo meniu jūsų tinklalapyje.
Parašykite savo nepakenktą sąrašą tokiu būdu:
- class = "tablist">
- CSS 3
- id = "dabartinis"> skirtukai
- Dėl
- Meniu
Jūs pastebėsite, kad kodas skleidžia du dalykus: class = "tablist" ir id = "current". Pirmasis reikalingas . Jei nenurodysite lentelės sąrašo sąrašo sąraše, skirtukai neveiks. Antrasis variantas yra neprivalomas. Įdėkite id = "dabartinis" į bet kurį skirtuką, kurį norėtumėte pabrėžti šiame puslapyje. Aš paprastai tai naudoju norėdamas pažymėti puslapį, kuriame esate, bet galite jį naudoti norėdami pažymėti svarbiausią skirtuką. Arba galite visiškai jį pašalinti.
03 iš 06
Pradėkite redaguoti savo stiliaus lapą
Galite naudoti išorinį stiliaus lapą arba vidinį stiliaus lapą . Mėginio meniu puslapyje naudojama vidinė stiliaus lentelė dokumente
.Pirmiausia mes stiliaus UL pati
Čia mes naudojame klasės lentelių sąrašą. HTML. Užuot sukūrę UL žymą, kuri jūsų visų puslapių netvarkingus sąrašus būtų suprojektuota, turėtumėte stiliaus tik UL klasės. tablist Taigi pirmasis jūsų CSS įrašas turėtų būti:
.tablist {}Man patinka įdėti į pabaigą garbanotą petnešėlį ()) anksčiau laiko, todėl to nepamirškiau vėliau.
Nors mes naudojame nepageidaujamą sąrašo žymą skirtuko meniu sąraše, bet nenorime, kad būtų rodomos visos kulkos ar skaičiai. Taigi pirmasis stilius, kurį turėtumėte pridėti, yra. sąrašo stilius: nėra; Tai nurodo naršyklei, kad nors jis yra sąrašas, tai sąrašas, kuriame nėra iš anksto nustatytų stilių (pvz., Kulkų ar skaičių).
Tada galite nustatyti savo sąrašo aukštį, kad jis atitiktų vietą, kurią norite užpildyti. Aš pasirinko 2em mano aukštį, nes tai yra dvigubai standartinis šrifto dydis, ir suteikia maždaug pusę em virš ir žemiau skirtuko teksto. aukštis: 2em; Bet jūs galite nustatyti savo pločiui bet kokį norimą dydį. UL žymos automatiškai užims 100% pločio, todėl, jei nenorite, kad jis būtų mažesnis nei dabartinis konteineris, galite palikti plotį.
Galiausiai, jei jūsų pagrindiniame stiliaus lange nėra nustatymų UL ir OL žymėms, jūs norėsite juos įterpti. Tai reiškia, kad turėtumėte išjungti UL ribų, maržas ir užpildymą. padding: 0; marža: 0; siena: nėra; Jei jau turite "UL" žymą iš naujo, galite keisti paraštes, pamušalus ar sieneles, kad atitiktų jūsų dizainą.
Jūsų galutinis .tablist klasė turėtų atrodyti taip:
.tablist {list-style: none; aukštis: 2em; padding: 0; marža: 0; siena: nėra; }04 iš 06
LI sąrašo elementų redagavimas
Kai tik sukursite savo nepakartojamą sąrašą, jums reikės suplanuoti jo žymes. Priešingu atveju jie veiks kaip standartinis sąrašas, o kiekvienas pereis į kitą eilutę, nepadarius tinkamų skirtukų.
Pirma, nustatykite stiliaus savybę:
.tablist li {}Tada norite plaukioti savo skirtukus, kad jie būtų horizontalioje plokštumoje. plūdė: kairė;
Ir nepamirškite pridėti skirtumo tarp skirtukų, kad jie nebūtų sujungti. marža-dešinė: 0.13em;
Jūsų stiliai li turėtų atrodyti taip:
.tablist li {float: left; marža-dešinė: 0.13em; }05 iš 06
Padaryti skirtukus atrodyti skirtukų su CSS 3
Kad atliktumėte didžiąją šio stiliaus lapo keliamą pakėlimą, aš nukreipiu į nuorodas, esančias netvarkingame sąraše. Naršyklės pripažįsta, kad nuorodos daro daugiau į tinklalapį nei kitos žymos, todėl senesnes naršykles būtų lengviau laikytis, pvz., Užveskite naršykles, jei pritvirtintumėte juos prie inkaro žymos (nuorodos). Taigi pirmiausia rašykite savo stiliaus savybes:
.tablist li a () .tablist li a: hover ()Kadangi šie skirtukai turėtų veikti kaip skirtukai programoje, jūs norite, kad visas skirtuko sritis būtų galima spustelėti, o ne tik susietas tekstas. Norėdami tai padaryti, jums reikia konvertuoti A žymeles iš įprastos " inline " būsenos į bloko elementą . ekranas: blokas; (Jei jus domina sužinoti daugiau apie skirtumą, skaitykite " Blokavimo lygis" ar "Inline elementai" .)
Tada paprastas būdas priversti savo skirtukus būti simetriški vienas su kitu, bet vis tiek lankstus, kad tilptų į teksto plotį, kad teisingas ir kairysis įklijuoti būtų vienodi. Aš naudoju užpildo stenografinės savybės, kad viršutinė ir apatinė būtų 0, o dešinė ir kairė - 1em. padding: 0 1em;
Aš taip pat nusprendžiau pašalinti nuorodą, todėl skirtukai atrodo mažiau kaip nuorodos. Bet jei jūsų auditorija gali būti supainioti, palikite šią eilutę. nuoroda apdaila: nė vienas;
Išskleidžiant ploną kraštą aplink skirtukus, jie atrodo kaip skirtukai. Aš naudoju sienų stenografinį turtą, kad įterptų sieną aplink visų keturių pusių sieną: 0.06em kietas # 000; Tada jis naudojo sienų apačioje esančią nuosavybę, kad ją pašalintų iš apačios. border-bottom: 0;
Tada padariau keletą skirtukų šrifto, spalvų ir fono spalvų pakeitimų. Nustatykite juos į stilių, kurie atitinka jūsų svetainę. šriftas: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; spalva: # 000; fono spalva: #ccc;
Visi aukščiau išvardyti stiliai turėtų būti įtraukti į parinkiklį .tablist li a, taisyklę, kad jie apskritai veiktų pritvirtinimo žymes. Tada, norėdami, kad skirtukai būtų rodomi labiau paspaudžiami, turėtumėte pridėti keletą valstybės taisyklės. Tablist li a: užveskite pelės žymeklį.
Man patinka keisti teksto ir fono spalvą, kad galėtumėte padaryti skirtuką "pop", kai jį pelėsi. fonas: # 3cf; spalva: #fff;
Aš įtraukiau dar vieną priminimą naršyklėms, kad norėčiau, kad nuoroda nebebūtų pabrėžta. teksto apdaila: nėra; Kitas paplitęs metodas yra grįžti pabrėžti, kai pelėsite virš skirtuko. Jei norite tai padaryti, pakeiskite jį teksto apdaila: pabraukite;
Bet kur yra CSS 3?
Jei atkreipei dėmesį, jūs tikriausiai pastebėjote, kad stiliaus lape nebuvo naudojamas koks nors CSS 3 stilius. Tai turi pranašumą dirbant bet kurioje šiuolaikinėje naršyklėje, įskaitant "Internet Explorer". Tačiau tai nereiškia, kad skirtukai atrodo kaip nieko daugiau nei kvadratinės dėžės. Pridėjus CSS 3 stiliaus skambučio sienos spindulį (ir tai susiję su konkrečiais naršyklės skambučiais), kraštus galite apvalinti, kad atrodytų labiau kaip skirtukai manilos aplanke.
Stilius, kuriuos turėtumėte pridėti prie lentelės .tablist, yra: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-spindulys: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; pasienio-viršaus dešinysis spindulys: 0.50em; kraštas-viršaus kairysis spindulys: 0.50em;
Tai yra paskutinės stiliaus taisyklės, kurias parašiau:
.tablist li a (display: block; padding: 0 1em; teksto apdaila: nėra; sienos: 0.06em tvirtas # 000; border-bottom: 0; šriftas: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; spalva: # 000; fono spalva: #ccc; / * CSS 3 elementai * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-spindulys: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 0.50em; pasienio-viršaus dešinysis spindulys: 0.50em; kraštas-viršaus kairysis spindulys: 0.50em; } .tablist li a: hover {background: # 3cf; spalva: #fff; teksto apdaila: nėra; }Naudodamiesi šiais stiliais, turite skirtukų meniu, kuris veikia visose pagrindinėse naršyklėse ir atrodo kaip gražūs atspausdinti skirtukai CSS 3 suderinamosiose naršyklėse. Kitas puslapis suteikia jums dar vieną pasirinkimą, kurį galite naudoti, kad sukurtumėte dar daugiau.
06 iš 06
Paryškinkite dabartinį skirtuką
Sukūrus HTML, UL turėjo vieną sąrašą su ID. Tai leidžia jums suteikti vienam LI skirtingą stilių iš kitų. Dažniausiai būna tai, kad dabartinis skirtukas tam tikru būdu išsiskirtų. Kitas būdas pamąstyti yra tas, kad norėtumėte išversti neaktyvus skirtukus. Tada pakeiskite vietą, kurioje ID yra skirtinguose puslapiuose.
Aš sukūriau ir dabartinę # žymą, ir #incurrent A: hover sta, kad abu šiek tiek skirsis. Galite pakeisti šio elemento spalvą, fono spalvą, netgi aukštį, plotį ir užpildą. Padarykite kokius nors pakeitimus, kurie yra pagrįsti jūsų dizainu.
.tablist li # current a {fono spalva: # 777; spalva: #fff; } .tablist li # dabartinis a: hover {background: # 39C; }Ir tu baigsi! Jūs ką tik sukūrėte skirtukų meniu savo svetainei.