Hvordan lage faner med CSS

Hvordan lage faner med CSS


Tabs er stifter av webdesign med god grunn. En fanebasert navigasjon stil er lett gjenkjennelig og iboende lett å forstå, og dermed øke nettstedets tilgjengelighet. Det er også enkelt å lage og, når det gjøres riktig, kan forbedre utformingen av nettstedet ditt. Den Cascading Style Sheets (CSS) stilark språk åpner for så mye tilpasning som du vil når du oppretter faner.

Bruksanvisning

1 Lag fanene 'HTML fundament. Siden kategoriene er en liste over alternativer, den mest logiske måten å lage dem ville være med sorterte liste. Du vil også være lurt å lage en stor del under der informasjonen i kategoriene vises. Et generisk \ "div \" vil arbeide for det. Koden kan se slik ut:
<Ul>
<Li> <a href=\"#\"> Hjem </a> </ li>
<Li> <a href=\"#\"> Om </a> </ li>
<Li> <a href=\"#\"> Kontakt </a> </ li>
</ Ul>
<Div> </ div>
I dette eksempelet er det tre faner, som fører til hjemmesiden, den \ "Om \" side og \ "Kontakt \" side. Selvfølgelig, ville du trenger å erstatte \ "# \" symbol med selve nettadressen til disse sidene.

2 Fjern standard nettleser stiler ved å tilbakestille marginer og padding av sorterte liste til \ "0 \" Ellers fanene ser annerledes på ulike nettlesere. I CSS stilark, legge til:
ul {
margin: 0

padding: 0

}

3 Gjør listeelementene vises horisontalt i stedet for vertikalt ved å legge til \ "display: inline \" regelen til din style sheet:
li {
display: inline

}

4 Lag en grunnleggende design for fanene ved også å gi dem en en-pixel svart kant:
li {
display: inline

border: 1px solid # 000

}
Gjør det samme for <div> under, og også satt sine bredde og høyde parametere for å sikre at det strekker seg lenger enn lengden av kategoriene:
div {
border: 1px solid # 000

bredde: 500px

høyde: 200px

}

5 Legg en \ "hover \" regelen som gjør at hver fane slå en annen farge når musen svever over det. I dette eksemplet vil vi gjøre bakgrunnen farge en lys grå:
li: hover {
background-color: #eee

}

6 Tilpass design som du ønsker. Du vil sannsynligvis ønske å gi listeelementene margin og padding verdier slik at teksten ikke vises som trangt. Du kan også endre grense farger, skrift av teksten eller noe annet du ønsker.