Miten luodaan navigointi CSS: llä ja ilman kuvia

Navigointi verkkosivuilla on luettelon muoto ja välilehtien navigointi on kuin vaakalistan. CSS: n avulla on helppo luoda horisontaalinen välilehtien navigointi, mutta CSS 3 antaa meille muutamia työkaluja, jotka tekevät niistä entistäkin mukavampia.

Tämä opetusohjelma vie sinut CSS-välilehden luomiseen tarvittavan HTML- ja CSS-koodin kautta. Napsauta tätä linkkiä nähdäksesi, miten se näyttää.

Tämä välilehtivalikko käyttääei kuvia, vain HTML ja CSS 2 ja CSS 3. Se voidaan helposti muokata lisätäksesi lisää välilehtiä tai muuttaa tekstiä niissä.

Selaintuki

Tämä välilehti -valikko toimiikaikki tärkeimmät selaimet. Internet Explorer ei näytä pyöristettyjä kulmia, mutta muuten se näyttää välilehdet kuten Firefox, Safari, Opera ja Chrome.

Kirjoita valikkoluettelo

Kaikki navigointivalikot ja välilehdet ovat oikeastaan ​​vain järjestämättömät luettelot. Joten ensimmäinen asia, jonka haluat tehdä, on kirjoittaa järjestämättömät linkit, mihin haluat välilehtisi navigoinnin mennä.

Tämä opetusohjelma olettaa, että kirjoitat HTML-koodin tekstieditorissa ja että tiedät, mistä HTML-valikosta sijoitetaan valikko web-sivulle.

Kirjoita näin järjestämättömät luettelot:

• class = "tablist">
  • CSS 3
  • id = "nykyinen"> välilehdet
  • varten
  • valikot
  Huomaat, että koodi kutsuu kahta asiaa: class = "tablist" ja id = "nykyinen". Ensimmäinen on vaaditaan. Jos et laita tablist luokka ei ole järjestetty, välilehdet eivät toimi. Toinen on valinnainen. Laittaa id = "nykyinen" minkä tahansa välilehden haluat olla korostettuna kyseisellä sivulla. Korostaamme yleensä tätä sivua, jota käytämme, mutta voit käyttää sitä korostamaan tärkein välilehti. Tai voit poistaa sen kokonaan.

Aloita tyylitietosi muokkaaminen

Voit käyttää joko ulkoista tyyliarkkia tai sisäistä tyyliarkkia. Näytteen valikkosivulla on sisäinen tyyliarkki asiakirjan.

Ensin tunnetaan UL itsestään

Tässä käytämme luokkaatablist HTML-muodossa. Sen sijaan, että muotoilisit UL-tunnisteen, joka muotoilee kaikki sivusi järjestämättömät luettelot, sinun tulisi muotoilla vain UL-luokka.tablist Joten ensimmäinen CSS-merkintäsi pitäisi olla:

.tablist {}

Haluamme laittaa lopun kihara-palkin (}) etukäteen, joten emme unohda sitä myöhemmin.

Käytämme välilehden valikkoluettelon järjestämättömää luettelotunnistetta, mutta emme halua luoteja tai numeroita hiipivän sisään. Joten ensimmäinen tyyli, jonka haluat lisätä, on.list-style: none; Tämä kertoo selaimelle, että vaikka se on luettelo, se on luettelo, jossa ei ole ennalta määritettyjä tyylejä (kuten luettelomerkkejä tai numeroita).

Tämän jälkeen voit asettaa luettelosi korkeuden vastaamaan tilaa, jonka haluat täyttää. Valitsimme 2em meidän korkeudelle, koska se kaksinkertaistaa tavallisen fontin koon, ja antaa noin puolet em ylä- ja alapuolella välilehden tekstistä.korkeus: 2em; Mutta voit asettaa leveyden haluamallesi koolle. UL-tagit käyttävät automaattisesti 100% leveydestä, joten jos haluat, että se on pienempi kuin nykyinen kontti, voit jättää leveyden pois.

Lopuksi, jos päällissasi ei ole esiasetuksia UL- ja OL-tunnisteille, haluat laittaa ne sisään. Tällöin sinun on poistettava UL: n rajat, marginaalit ja pehmuste. padding: 0; margin: 0; raja: ei yhtään; Jos olet jo nollannut UL-tunnisteen, voit muuttaa reunuksia, pehmusteita tai reunoja muokkaustasi sopivaksi.

Viimeisen .tablist-luokan pitäisi näyttää tältä:

.tablist {list-style: none; korkeus: 2em; padding: 0; margin: 0; raja: ei yhtään; }

LI-luettelon kohteiden muokkaus

Kun olet määrittänyt järjestämättömän luettelon, sinun on muotoiltava LI-tagit sen sisällä. Muussa tapauksessa ne toimivat vakiolistana ja siirrytään seuraavalle riville ilman, että välilehdet asetetaan oikein.

Tee ensin tyyliominaisuus:

.tablist li {}

Sitten haluat kelluttaa välilehtisi niin, että ne sopivat vaakatasoon. float: vasen;

Älä unohda lisätä marginaaleja välilehtien välillä, jotta ne eivät sulautuisi yhteen. margin-right: 0.13em;

Sinun tyylisi pitäisi näyttää tältä:

.tablist li {float: vasen; margin-right: 0.13em; }

Tabs Looks -työkalujen tekeminen CSS: llä 3

Jos haluat tehdä suurimman osan raskaasta nostosta tässä tyylitaulukossa, kohdistamme järjestysjärjestyksessä olevat linkit. Selaimet tunnistavat, että linkit toimivat enemmän verkkosivuilla kuin muut tagit, joten vanhojen selainten helpompi noudattaa asioita, kuten hover-tiloja, jos liität ne ankkurointitunnisteeseen (linkit). Kirjoita ensin tyyliominaisuudet seuraavasti:

.tablist li a {} .tablist li a: hover {}

Koska nämä välilehdet toimivat sovelluksen välilehtinä, haluat, että välilehden koko alue voidaan napsauttaa, ei vain linkitettyä tekstiä. Tätä varten sinun on muunnettava A-tunniste normaalista "inline" -tilasta osaksi lohkoelementtiä. display: block; (Jos olet kiinnostunut tietämään enemmän erosta, lue Estonian-taso vs. Inline-elementit.)

Sitten helpompi tapa pakottaa välilehtien symmetrinen keskenään, mutta silti joustavasti sovittaa tekstin leveys on tehdä oikeasta ja vasemmasta padding sama. Käytimme pehmusteiden pikatoimitusominaisuutta ylä- ja alapuolelle 0 ja oikealle ja vasemmalle 1em. pehmuste: 0 1em;

Olemme myös halunneet poistaa linkin alleviivojen, jotta välilehdet näyttäisivät vähemmän kuin linkit.Mutta jos yleisösi voi sekoittaa tämä, jätä tämä rivi pois. link-decoration: none;

Lahjoittamalla ohut raja välilehtien ympärille, se tekee niistä näyttäviä välilehtiä. Käytimme rajan pika-ominaisuutta rajan asettamiseksi kaikkiin neljään osaan raja: 0.06em solid # 000; Ja sitten käytti reunaviivan omaisuutta poistamaan sen alhaalta. border-bottom: 0;

Sitten teimme joitain muutoksia välilehtien fonttiin, väreihin ja taustaväreihin. Aseta ne tyyleihin, jotka vastaavat sivustoasi. fontti: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;

Kaikkien edellä mainittujen tyylien pitäisi mennä valitsimeen.tablist li a, sääntö, jotta ne vaikuttavat ankkureitakkeihin yleensä. Sitten, jotta välilehdet näkyvät napsautettavin, lisää muutama valtion sääntö.tablist li a: hover.

Haluamme muuttaa tekstin ja taustaväriä, jotta välilehti ponnahtaa kun hiiren sen päälle. tausta: # 3cf; väri: #fff;

Lisäsimme myös toisen selaimen muistutuksen, jonka mukaan linkkiä ei pidä korostaa. text-decoration: none; Toinen tavallinen tapa on kääntää alleviivaus takaisin, kun hiiren osoitin välilehdellä. Jos haluat tehdä sen, muuta se text-decoration: korostaa;

Mutta mihin CSS 3 on?

Jos olet kiinnittänyt huomiota, olet todennäköisesti huomannut, että tyyliarkissa ei ole ollut CSS 3 -tyylejä. Tällä on se etu, että työskentelet missä tahansa uudessa selaimessa, kuten Internet Explorerissa. Mutta välilehdet eivät näytä mitään muuta kuin neliölaatikoita. Lisäämällä CSS 3 -tyylinen puhelun raja-alue (ja siihen liittyvät selainkohtaiset puhelut) voit tehdä reunoista pyöristetyt ja näyttää enemmän kuin manila-kansion välilehdet.

Tyylit, joita sinun pitäisi lisätä .tablist li a säännöt ovat: -webkit-border-top-right-säde: 0.50em; -webkit-border-top-vasemman säde: 0.50em; -moz ylittävä-säde-topright: 0.50em; -moz ylittävä-säde-topleft: 0.50em; border-top-right-säde: 0.50em; border-top-vasen-säde: 0.50em;

Nämä ovat viimeiset tyylisäännöt, jotka kirjoitimme:

.tablist li a {display: block; pehmuste: 0 1em; text-decoration: none; raja: 0.06em solid # 000; border-bottom: 0; fontti: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elementtiä * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-vasemman säde: 0.50em; -moz ylittävä-säde-topright: 0.50em; -moz ylittävä-säde-topleft: 0.50em; border-top-right-säde: 0.50em; border-top-vasen-säde: 0.50em; } .tablist li a: hypätä {tausta: # 3cf; väri: #fff; text-decoration: none; }

Näillä tyylillä on välilehtivalikko, joka toimii kaikissa tärkeimmissä selaimissa ja näyttää mukavalta painetulta välilehdeltä CSS 3 -yhteensopivilta selaimilta. Seuraava sivu antaa sinulle vielä yhden vaihtoehdon, jota voit käyttää pukeutumaan vieläkin enemmän.

Korosta nykyinen välilehti

Luomalla HTML: llä UL: llä oli yksi listaelementti, jolla on tunnus. Näin voit antaa yhdelle LI: lle erilainen tyyli muusta. Yleisin tilanne on, että nykyinen välilehti erottuu jollain tavalla. Toinen tapa ajatella tätä on, että haluat harmaata ulos välilehdet, jotka eivät ole eläviä. Sen jälkeen vaihdat, missä id on eri sivuilla.

Me tyyli sekä #current A -merkki että #current A: hover sta siten, että molemmat ovat hieman erilaisia. Voit muuttaa kyseisen elementin väriä, taustaväriä, jopa korkeutta, leveyttä ja pehmusteita. Tee mikä tahansa muutos järkevään muotoiluun.

.tablist li # nykyinen a {taustaväri: # 777; väri: #fff; } .tablist li # nykyinen a: hover {tausta: # 39C; }

Ja olet valmis! Olet juuri luonut välilehden valikon verkkosivustollesi.