01/06
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älilehdet-valikko ei käytä kuvia , vain HTML- ja CSS 2- ja CSS3-versioita. Se voidaan muokata helposti lisätäksesi välilehtiä tai muuttaa tekstiä niihin.
Selaintuki
Tämä välilehti-valikko toimii kaikissa suurissa selaimissa . Internet Explorer ei näytä pyöristettyjä kulmia, mutta muuten se näyttää välilehdet kuten Firefox, Safari, Opera ja Chrome.
02/06
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 = "current"> Välilehdet
- varten
- valikot
Huomaat, että koodi kutsuu kahta asiaa: class = "tablist" ja id = "current". Ensimmäinen on pakollinen . Jos et laita taulukkoluokkaa järjestämättömään luetteloosi, välilehdet eivät toimi. Toinen on valinnainen. Laita id = "nykyinen" kumpiin välilehteen, jonka haluat olla korostettuna kyseisellä sivulla. Käytän tätä yleensä korostamaan sivua, johon olen päällä, mutta voit käyttää sitä korostamaan tärkein välilehti. Tai voit poistaa sen kokonaan.
03/06
Aloita tyylitietosi muokkaaminen
Voit käyttää joko ulkoista tyyliarkkia tai sisäistä tyyliarkkia . Näytteen valikkosivulla on sisäinen tyyliarkki
-asiakirjassa.Ensin tunnetaan UL itsestään
Tässä käytämme HTML-luokan luokka-välilehteä. 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 CSS: n ensimmäinen merkintä tulee olla:
.tablist {}Haluan laittaa lopun kihara brace (}) etukäteen, joten en 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ää. Valitsin 2em korkeudelle, koska se kaksinkertaistaa tavallisen fontin koon ja antaa noin puolet em-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 isäntälaatikkosivullasi ei ole esiasetuksia UL- ja OL-tunnisteille, sinun kannattaa laittaa ne sisään. Tällöin sinun on poistettava UL: n reunukset, 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; }04/06
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; }05/06
Tabs Looks -työkalujen tekeminen CSS: llä 3
Jos haluat tehdä suurimman osan raskaasta nostosta tässä tyylialustassa, kohdistan itselleni järjestettyjen järjestöjen 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äytin pehmustepyyhkäisyominaisuutta ylä- ja alareunan asettamiseen arvoon 0 ja oikealle ja vasemmalle 1em. pehmuste: 0 1em;
Olen myös päättänyt poistaa linkin korostaa, niin että välilehdet näyttävä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äytin rajan pika-ominaisuutta rajan asettamiseksi kaikkien neljän puolen reunaan: 0.06em solid # 000; Ja sitten käytti reunaviivan omaisuutta poistamaan sen alhaalta. border-bottom: 0;
Sitten tein 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ä valitsimelle .tablist li a, sääntö, jotta ne vaikuttavat ankkurintunnisteisiin yleensä. Sitten, jotta välilehdet näyttäisivät napsautettaviksi, lisäät muutaman valtion säännön .tablist li a: hover.
Haluan vaihtaa tekstin ja taustaväriä, jotta välilehti ponnahtaa kun hiiren sen päälle. tausta: # 3cf; väri: #fff;
Ja sain myös toisen muistutuksen selaimiin, jotka haluavat, että linkkiä ei ole korostettu. text-decoration: none; Toinen tavallinen tapa on kääntää alleviivaus takaisin, kun hiiren osoitin välilehdellä. Jos haluat tehdä sen, muuta se tekstin koristeluun: underline;
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, jotka sinun pitäisi lisätä .tablist li -sääntöön ovat: -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;
Nämä ovat viimeiset tyylisäännöt, joita kirjoitin:
.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.
06/06
Korosta nykyinen välilehti
Luomalla HTML: llä UL: llä oli yksi listaelementti, jonka tunnus oli. 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.
I tyyli sekä #current-merkintä että #current A: hover sta joten 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.