01 od 06
Kako ustvariti navidezno navigacijo s CSS in brez slik
Navigacija na spletnih straneh je oblika seznama, navigacija s karticami pa je kot vodoravni seznam. Precej enostavno je ustvariti vodoravno krmarjenje z zavihki s CSS, CSS 3 pa nam daje še nekaj orodij, ki jih naredijo videti še lepše.
Ta vadnica vas bo popeljala skozi HTML in CSS, potrebne za ustvarjanje menija z zavihki CSS. Kliknite to povezavo, da vidite, kako bo izgledal.
Ta kartici ne uporablja nobenih slik , samo HTML in CSS 2 in CSS 3. Lahko jih preprosto uredite, da dodate več zavihkov ali spremenite besedilo v njih.
Podpora brskalnika
Ta meni zavihek bo deloval v vseh večjih brskalnikih . Internet Explorer ne bo prikazal zaobljenih kotov, sicer bo prikazal zavihke, kot so Firefox, Safari, Opera in Chrome.
02 od 06
Napišite svoj seznam menijev
Vsi navigacijski meniji in zavihki so res samo neurejen seznam. Torej, prva stvar, ki jo želite narediti, je, da napišete neurejen seznam povezav, kamor želite, da gre za vašo kartico.
Ta vaja predpostavlja, da pišete svoj HTML v urejevalnik besedila in da veste, kje postaviti HTML za svoj meni na vaši spletni strani.
Napišite svoj neurejen seznam, kot je ta:
- class = "tabela">
- CSS 3
- id = "trenutni"> zavihki
- Za
- Meniji
Opazili boste, da kodira dve stvari: class = "tablist" in id = "current". Prvi je potreben . Če vrstice tablice ne postavite na svoj neurejen seznam, zavihki ne bodo delovali. Drugi je neobvezen. Vnesite id = "trenutno" na zavihku, ki ga želite označiti na tej strani. Ponavadi to uporabljam, da označim stran, na kateri sem, vendar jo lahko uporabite, da označite najpomembnejši zavihek. Ali ga lahko popolnoma odstranite.
03 od 06
Začnite urejati svoj slogovni list
Uporabite lahko zunanji slogovni list ali interni slogovni list . Stran v meniju z vzorcem v
dokumenta uporablja notranji slogovni list.Najprej bomo sami sli- šali
Tukaj uporabljamo tabelo razreda v HTML-ju. Namesto oblikovanja oznake UL, ki bi na vse strani oblikovala vse neurejene sezname, bi morali oblikovati samo razred UL. tablic Torej mora biti prvi vnos v vašem CSS:
.tablist {}Pred kratkim sem v končni obliki zavihtela (), zato pozneje ne pozabim.
Medtem ko uporabljamo neurejeno oznako seznama za seznam zavihek, vendar ne želimo, da bi bile krogle ali številke plazile. Torej, prvi slog, ki ga morate dodati, je. slog seznama: nič; To govori brskalniku, da je seznam, brez predhodno določenih slogov (npr. Puščice ali številke).
Nato lahko višino vašega seznama nastavite tako, da se ujema z želenim prostorom. Za mojo višino sem izbral 2em, ker je to dvojna standardna velikost črk in daje približno pol em nad in pod besedilom zavihka. višina: 2em; Vendar lahko svojo širino nastavite na poljubno velikost, ki jo želite. Oznake UL bodo samodejno prevzele 100% širine, tako da razen, če želite, da je manjši od trenutnega vsebnika, lahko širino pustite zunaj.
Nazadnje, če vaš glavni slogovni list nima prednastavitev za oznake UL in OL, jih boste želeli vključiti. To pomeni, da morate izklopiti meje, robove in oblazinjenje na UL. oblazinjenje: 0; marža: 0; meja: nič; Če ste že ponastavili oznako UL, lahko spremenite robove, oblazinjenje ali rob, na nekaj, kar ustreza vašemu oblikovanju.
Vaš končni .tablistni razred bi moral izgledati takole:
.tablist {list-style: none; višina: 2em; oblazinjenje: 0; marža: 0; meja: nič; }04 od 06
Urejanje elementov seznama LI
Ko ste izbrali svoj neurejen seznam, morate v njej oblikovati oznake LI. V nasprotnem primeru bodo delovali kot standardni seznam in vsak premik v naslednjo vrstico brez pravilnega vstavljanja zavihkov.
Najprej nastavite lastnost sloga:
.tablist li {}Potem si želite plavatirati svoje zavihke, tako da se poravnajo na vodoravni ravnini. float: levo;
In ne pozabite dodati nekaj rezerve med zavihki, tako da se ne združijo. margin-right: 0,13em;
Vaši slogi bi morali izgledati takole:
.tablist li {float: left; margin-right: 0,13em; }05 od 06
Ustvarjanje zavihkov z zavihki s CSS 3
Če želite večino težkega dvigovanja v tem slogovanem listu, ciljam na povezave znotraj neurejenega seznama. Brskalniki prepoznajo, da povezave na spletnem mestu storijo več kot druge oznake, zato je starejše brskalnike lažje uskladiti s stvarmi, kot so lebdenja, če jih priključite na sidrno oznako (povezave). Torej najprej napišite lastnosti sloga:
.tablist li a {} .tablist li a: hover {}Ker bi morali ti zavihki delovati kot zavihki v aplikaciji, želite, da se celotno območje zavihka klikne, ne le povezano besedilo. Če želite to narediti, morate oznako A pretvoriti iz običajnega stanja " inline " v blok element . prikaz: blok; (Če želite vedeti več o razliki, preberite Block-Level vs. Inline Elements .)
Nato je enostaven način, da bi vaši zavihki simetrični med seboj, vendar še vedno prilagodljiv, da se prilega širini besedila, naredi desno in levo oblazinjenje enako. Uporabil sem oblogo kratkega stika za nastavitev zgoraj in spodaj na 0 in desno ter levo na 1em. polnjenje: 0 1em;
Odločil sem se tudi, da odstranim povezavo, tako da tabulatorji izgledajo manj kot povezave. Ampak, če bi vaše občinstvo morda zmedlo, pustite to vrstico. link-decoration: none;
S postavitvijo tanke obrobe okoli zavihkov jih naredi videti kot zavihki. Uporabil sem robno shorthando lastnosti, da mejo okoli vseh štirih strani mejo: 0.06em trdno # 000; In nato uporabil lastnost mejnega dna, da ga odstranite od spodaj. mejno spodaj: 0;
Potem sem naredil nekaj prilagoditev pisave, barve in barve ozadja zavihkov. Nastavite jih na sloge, ki se ujemajo z vašim spletnim mestom. pisava: krepko 0.88em / 2em arial, geneva, helvetica, sans-serif; barva: # 000; barva ozadja: #ccc;
Vsi zgoraj navedeni slogi naj bodo v izbirniku .tablist li a, pravilo, tako da vplivajo na sidrne oznake na splošno. Potem, če želite, da se zavihki zdijo bolj klikni, dodajte nekaj državnih pravil. .tablist li a: hover.
Rad bi spremenil barvo besedila in ozadja, da bi se jeziček spustil, ko miško nad njim. ozadje: # 3cf; barva: #fff;
V brskalnike sem dodal še en opomnik, da želim, da povezava ne ostane podčrtana. tekst-dekoracija: nič; Še ena pogosta metoda je, da ponovno podčrtate, ko miško nad zavihkom. Če želite to storiti, ga spremenite v tekstovno dekoracijo: podčrtajte;
Kje je CSS 3?
Če ste bili pozorni, ste verjetno opazili, da ni bilo slogov CSS 3, uporabljenih v slogovnem listu. To ima prednost pri delu v katerem koli sodobnem brskalniku, vključno z Internet Explorerjem. Toda tabulatorji ne izgledajo nič več kot kvadratne škatle. Z dodajanjem strežnika za klic v stilu CSS 3 (in z njim povezanih klicev, povezanih z brskalnikom) lahko robove zaokrožite, če želite videti več kot zavihki v mapi manila.
Slogi, ki jih morate dodati pravilniku .tablist li, so: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left-polmer: 0.50em; -moz-obroba-radij-topright: 0.50em; -moz-meja-polmer-topleft: 0.50em; mejni zgornji desni desni polmer: 0.50em; mejni zgornji levi polmer: 0.50em;
To so končna pravila o slogu, ki sem jih napisal:
.tablist li a {display: block; polnjenje: 0 1em; tekst-dekoracija: nič; border: 0.06em solid # 000; mejno spodaj: 0; pisava: krepko 0.88em / 2em arial, geneva, helvetica, sans-serif; barva: # 000; barva ozadja: #ccc; / * Elementi CSS 3 * / webkit-meja-top-desni-polmer: 0.50em; -webkit-border-top-left-polmer: 0.50em; -moz-obroba-radij-topright: 0.50em; -moz-meja-polmer-topleft: 0.50em; mejni zgornji desni desni polmer: 0.50em; mejni zgornji levi polmer: 0.50em; } .tablist li a: hover {ozadje: # 3cf; barva: #fff; tekst-dekoracija: nič; }S temi slogi imate v meniju z zavihki, ki deluje v vseh glavnih brskalnikih, in izgleda kot lepo natisnjene zavihke v brskalnikih, skladnih s CSS 3. Naslednja stran vam daje še eno možnost, ki jo lahko uporabite za dodatno obleko.
06 od 06
Označite trenutni zavihek
V HTML-ju, ki sem ga ustvaril, ima UL en element seznama z ID-jem. To vam omogoča, da drugemu slogu daste drugačen slog od ostalih. Najbolj pogosta situacija je, da se trenutni zavihek na nek način izstopa. Drug način razmišljanja o tem je, da želite sivati v zavihkih, ki niso v živo. Nato spremenite, kje je id na različnih straneh.
Stojim oznako #Turrent A in #Trenutno A: lebdite sta, tako da sta oba nekoliko drugačna. Lahko spremenite barvo, barvo ozadja, celo višino, širino in oblazinjenje tega elementa. Naredite vse spremembe, ki so smiselne pri vašem oblikovanju.
.tablist li # trenutna {barva ozadja: # 777; barva: #fff; } .tablist li # trenutni a: hover {ozadje: # 39C; }In končal si! Pravkar ste ustvarili tabulatorski meni za vaše spletno mesto.