01 af 06
Hvernig á að búa til Tabbed Navigation með CSS og No Images
Leiðsögn á vefsíðum er mynd af listanum og flipa flakk er eins og lárétt listi. Það er frekar auðvelt að búa til lárétta flipa flakk með CSS, en CSS 3 gefur okkur nokkrar fleiri verkfæri til að láta þá líta enn betur út.
Þessi kennsla mun taka þig í gegnum HTML og CSS sem þarf til að búa til CSS flipa valmynd. Smelltu á þennan tengil til að sjá hvernig það mun líta út.
Þessi flipa valmynd notar engar myndir , bara HTML og CSS 2 og CSS 3. Það er auðvelt að breyta til að bæta við fleiri flipum eða breyta texta í þeim.
Stuðningur við vafra
Þessi flipavalmynd mun virka í öllum helstu vöfrum . Internet Explorer mun ekki sýna hringlaga horn, en annars mun það sýna flipa eins og Firefox, Safari, Opera og Chrome.
02 af 06
Skrifaðu valmyndalistann þinn
Allir flakkavalmyndir og flipar eru í raun bara óskráð listi. Svo það fyrsta sem þú vilt gera er að skrifa óraunað lista yfir tengla þar sem þú vilt flipa flakk til að fara.
Þessi einkatími er gert ráð fyrir að þú skrifir HTML í ritstjóra og að þú veist hvar á að setja HTML fyrir valmyndina á vefsíðunni þinni.
Skrifaðu óflokkaðan lista eins og þetta:
- class = "tablist">
- CSS 3
- id = "núverandi"> flipa
- Fyrir
- Valmyndir
Þú munt taka eftir því að kóðinn kallar á tvo hluti: class = "tablist" og id = "current". Fyrsta er krafist . Ef þú setur ekki flipann á bekknum þínum á óflokkaðan lista, munu fliparnir ekki virka. Annað er valfrjálst. Settu inn id = "núverandi" á hvaða flipa þú vilt að lögð áhersla á á síðunni. Ég nota venjulega þetta til að auðkenna síðuna sem ég er á, en þú getur notað hana til að auðkenna mikilvægasta flipann. Eða þú getur fjarlægt það alveg.
03 af 06
Byrja að breyta stílblaðinu þínu
Þú getur notað annaðhvort ytri stíll lak eða innri stíl lak . Sýnishornasíðan síða notar innri stíll lak í
Fyrst munum við stilla UL sjálft
Þetta er þar sem við notum flipann í bekknum í HTML. Frekar en að stilla UL merkið, sem myndi stilla allar ómerktar listar á síðunni þinni, ættir þú að stilla aðeins UL bekkinn. tablist Svo fyrsta færslan í CSS þín ætti að vera:
.tablist {}Mér finnst gaman að setja í endalokið hrokkið (}) fyrirfram, svo ég gleymi því ekki síðar.
Þó að við notum ómerktan listamerki fyrir flipann, þá viljum við ekki vera með nein skotpunkta eða tölur sem skríða inn. Þannig að fyrsta stíllinn sem þú ættir að bæta við er. listastíll: ekkert; Þetta segir vafranum að það sé listi með lista, en engin fyrirfram ákveðin stíl (eins og byssukúlur eða tölur).
Þá er hægt að stilla hæð lista þinnar til að passa við plássið sem þú vilt að það fylgi. Ég valdi 2em fyrir hæð mína, þar sem það er tvöfalt staðlað leturstærð og gefur um það bil hálfan em yfir og neðan texta flipans. hæð: 2em; En þú getur stillt breidd þína í hvaða stærð sem þú vilt. UL tags taka sjálfkrafa upp 100% af breiddinni, þannig að ef þú vilt ekki að hún sé minni en núverandi gámur getur þú skilið breiddina út.
Að lokum, ef aðalstíllarkið þitt hefur ekki forstillingar fyrir UL og OL-merkin, þá viltu setja þau inn. Þetta þýðir að þú ættir að slökkva á landamærum, margar og padding á UL þinn. padding: 0; framlegð: 0; landamæri: enginn; Ef þú hefur nú þegar endurstillt UL-merkið geturðu breytt marmunum, púði eða landamærum í eitthvað sem passar við hönnunina.
Endanleg .tablist bekknum þínum ætti að líta svona út:
.tablist {listi-stíl: none; hæð: 2em; padding: 0; framlegð: 0; landamæri: enginn; }04 af 06
Breyting á LI lista hlutum
Þegar þú hefur stíll óskráða listann þinn þarftu að stilla LI merkin inni í henni. Annars munu þau virka eins og venjuleg listi og hver flytja á næstu línu án þess að setja flipana á réttan hátt.
Fyrst skaltu setja upp stíll eign þína:
.tablist li {}Þá viltu fljóta flipana þína þannig að þeir stíga upp á láréttu planinu. fljóta: vinstri;
Og gleymdu ekki að bæta við mörkum á milli flipa, svo þeir sameina ekki saman. framlegð-hægri: 0.13em;
Lítil stíll þín ætti að líta svona út:
.tablist li {flot: vinstri; framlegð-hægri: 0.13em; }05 af 06
Gerðu flipana útlit eins og flipa með CSS 3
Til að gera mest af þungum lyfta í þessari stílsíðu er ég að miða á tenglana í óflokkaðri listanum. Vafrar viðurkenna að tenglar gera meira á vefsíðu en aðrar merkingar, þannig að það er auðveldara að fá eldri vafra til að fara eftir hlutum eins og sveima, ef þú hengir þeim við akkerismerkið (tenglar). Svo fyrst skrifa stíl eiginleika þína:
.tablist li a {} .tablist li a: hover {}Vegna þess að þessar flipar ættu að virka eins og flipar í forriti, vilt þú að allt svæði flipans sé smellt á, ekki bara tengd texti. Til að gera þetta þarftu að breyta merkinu frá venjulegu " inline " ástandi í blokkareiningu . sýna: blokk; (Ef þú hefur áhuga á að vita meira um muninn skaltu lesa Block-Level vs Inline Elements .)
Þá er auðveld leið til að þvinga flipa þína til að vera samhverf við annan, en samt beygja til að passa breidd textans er að gera hægri og vinstri padding sama. Ég notaði padding shorthand eignir til að setja efst og neðst til 0 og hægri og vinstri til 1em. padding: 0 1em;
Ég valdi líka að fjarlægja tengilinn undirstrikar, þannig að fliparnir líta út eins og tenglar. En ef áhorfendur þínir gætu verið ruglaðir af því, slepptu þessari línu. hlekkur-skreyting: enginn;
Með því að setja þunnt landamæri í kringum flipana, gerir það þá líta út eins og flipa. Ég notaði landamæri skammtinn eign til að setja landamærin í kringum allar fjórar hliðar landamæri: 0.06em solid # 000; Og þá notaði landamæri neðst eign til að fjarlægja það frá botninum. Landamærisbotn: 0;
Síðan gerði ég nokkrar breytingar á leturgerð, lit og bakgrunnslit flipanna. Stilltu þetta í stíl sem samsvarar vefsvæðinu þínu. letur: djörf 0.88em / 2em arial, geneva, helvetica, sans-serif; litur: # 000; bakgrunnslit: #ccc;
Allar ofangreindar stílar ættu að fara í seljandanum .tablist li, reglan þannig að þau hafi áhrif á akkerapakkana almennt. Til að gera flipa virðast smellanlegt þá ættir þú að bæta við nokkrum reglum ríkisins .tablist li a: hover.
Mér finnst gaman að breyta lit á textanum og bakgrunni til að flipann birtist þegar þú músar yfir hana. bakgrunnur: # 3cf; litur: #fff;
Og ég fylgdi öðrum áminningu um vafra sem ég vil að tengilinn sé ekki undirstrikaður. textaskreyting: ekkert; Annar algeng aðferð er að snúa undirlínunni aftur þegar þú músar yfir flipann. Ef þú vilt gera það skaltu breyta því í textaskreytingu: undirstrika;
En hvar er CSS 3?
Ef þú hefur verið að borga eftirtekt, hefur þú sennilega tekið eftir því að engar CSS 3 stíll hefur verið notaður í stílblaðinu. Þetta hefur þann kost að vinna í hvaða nútíma vafra, þar á meðal Internet Explorer. En það þýðir ekki að fliparnir líta út eins og meira en ferningurarkassar. Með því að bæta við CSS 3 stíll hringja landamæris radíus (og það tengist vafra sérstakar símtöl) er hægt að gera brúnirnar ávalar, til að líta meira eins og flipar í Manila möppu.
Stíllin sem þú ættir að bæta við .tablist li reglurnar eru: -webkit-border-top-right-radius: 0.50em; -webkit-landamærin-toppur-vinstri-radíus: 0.50em; -moz-landamæris-radíus-rétthyrningur: 0.50em; -moz-border-radius-topleft: 0.50em; Rammamerkja-toppur-hægri radíus: 0.50em; Bylgjulengd efst til vinstri: 0,50em;
Þetta eru reglur um endanlega stíl sem ég skrifaði:
.tablist li a {sýna: blokk; padding: 0 1em; textaskreyting: ekkert; landamæri: 0,06em fastur # 000; Landamærisbotn: 0; letur: djörf 0.88em / 2em arial, geneva, helvetica, sans-serif; litur: # 000; bakgrunnslit: #ccc; / * CSS 3 þættir * / webkit-landamærin-toppur-hægri-radíus: 0.50em; -webkit-landamærin-toppur-vinstri-radíus: 0.50em; -moz-landamæris-radíus-rétthyrningur: 0.50em; -moz-border-radius-topleft: 0.50em; Rammamerkja-toppur-hægri radíus: 0.50em; Bylgjulengd efst til vinstri: 0,50em; } .tablist li a: sveima {bakgrunnur: # 3cf; litur: #fff; textaskreyting: ekkert; }Með þessum stílum hefurðu flipa valmynd sem virkar í öllum helstu vöfrum og lítur út eins og góð prentuð flipa í CSS 3 samhæfum vafra. Næsta síða gefur þér eina valkost sem þú getur notað til að klæða hana upp enn meira.
06 af 06
Merktu núverandi flipa
Í HTML sem ég bjó til, átti UL einn listaþátt með auðkenni. Þetta gerir þér kleift að gefa einn LI mismunandi stíl frá hinum. Algengasta ástandið er að láta núverandi flipa standa út á einhvern hátt. Önnur leið til að hugsa um þetta er að þú vilt gráa út flipana sem eru ekki lifandi. Þú breytir síðan hvar auðkenni er á mismunandi síðum.
Ég stíll bæði #streymismerkið og #current A: sveima sta þannig að báðir séu svolítið mismunandi. Þú getur breytt lit, bakgrunnslit, jafnvel hæð, breidd og púði þessarar þáttar. Gerðu það sem skiptir máli í hönnun þinni.
.tablist li # núverandi (bakgrunnslit: # 777; litur: #fff; } .tablist li # núverandi a: sveima {bakgrunnur: # 39C; }Og þú ert búinn! Þú hefur bara búið til flipa valmynd fyrir vefsvæðið þitt.