Hvordan lage Avrundede Tabs i CSS

January 11

Avrundede kategoriene er en felles stil av navigasjon på nettsteder. Besøkende klikke på fanene for å laste forskjellige sider på nettstedet. Metoden for å lage avrundet faner navigasjon er lik den prosessen som gjør navigeringslinjer, men du trenger å vite hvordan man skal forme hvert menyelement i en kategori. Den "box-radius" eiendom i CSS gjør det mulig å runde de to øverste hjørnene for å slå dine menyelementer i faner. Alle andre stilarter - kategorien farger, tekst farger og fonter - avhenger av stilene du ønsker for ditt nettsted.

Bruksanvisning

1 Legg en uordnet liste til din webside ved hjelp av "<ul>" koder. Sett en link inne hvert listepunkt for å lage en klikkbar kategorien:

2 Åpne stilark for ditt nettsted. Hvis du ikke har en ennå, opprette en tom fil og lagre den som "minestiler.css". Bruk denne koden mellom "<head>" koder på websiden til å legge inn stilarket:

Både stilark og websiden må være i samme mappe slik at den forrige koden arbeid.

3 Skriv en stil regel for sorterte liste, målretting sin ID navn. Inne i regelen, slå av punkt og fjerne venstre side padding:

faner {

list-style: none; /

Fjerner kuler /
padding-left: 0; / Fjerner liste innrykk /
}

4 Style fanene ved styling anker tags: tabs et {

background-color: blue;
Farge: hvit;
padding: 10px 5px;
display: block; /

Nødvendig når padding ankere /
border-top-venstre-radius: 10px;
border-top-høyre-radius: 10px;
}

Forrige eksempel farger fanene blå med hvit tekst, pads dem litt og gjør de to øverste hjørnene avrundet.

5 Float hvert listepunkt til venstre for å gjøre kategoriene kjører horisontalt over skjermen: faner li {

float: left;
}

Du kan ikke legge til "float: left" til ankere som du gjorde med de andre egenskapene, fordi dette fører til en sak hvor fanene vil se ut trinn.

6 Lag en hover staten for kategoriene:

tabs a: hover {

background-color: green;
}

I eksemplet, når du holder musepekeren over en kategori, vil det bli grønn.