Hvordan lage en horisontal navigasjonsfelt ved hjelp av CSS

Opprette en horisontal navigasjonslinjen ved hjelp av CSS er en verdifull HTML ferdighet. Du kan bygge profesjonelle navigasjonsfelt som du kan bruke i hvilken som helst nettside. Du kan endre farge, skriftstørrelse og grense farger uten å laste opp nye bilder eller endre koden på hver side.

Bruksanvisning

1 Åpne hjemmesiden din HTML-fil i notepad og lage en ikke-sorterte liste over navigasjons elementer som du vil inkludere i navigasjonsfeltet på hjemmesiden din. Dette er bare en enkel liste som du ville bruke til å opprette en punktmerket eller nummerert liste på websiden din. Det ser ut som dette: <ul> <li> Din første navigasjon overskriften </ li> <li> ditt andre navigeringssiden </ li> og avsluttes med </ ul>.

2 Tilsett <nav> tag til listen tag. Så ser HTML slik ut: <ul id = "nav"> <li id ​​= "nav-første side"> <a href="link til din første page"> First Page Navigation head </a> </ li > <li id ​​= "nav-second"> <a href="link til andre page"> andre side Kurs </a> </ li> og så videre.

3 Åpne din CSS fil. Denne filen er vanligvis plassert i css-mappen, og den inneholder alle definisjonene som forteller leseren hva tekst, kuler og så videre, vil se ut når vises i nettleseren. Følg linken i Resources for å lære å skrive en CSS-fil, hvis du ikke har en.

4 Skriv inn #nav på toppen av CSS stilark. Dette identifiserer at denne koden er relatert til din navigasjonsfeltet, siden vi definert dette med id = nav tag i hjemmesiden.

5 Still dine marginer og padding i CSS stilark 0. Så, skriv {margin: 0; padding: 0} i CSS stilark rett etter #nav. Den første delen av koden på CSS stilark er #nav {margin: 0; padding: 0}

6 Gjør navigasjonslinjen justeres horisontalt. Normalt en liste i en HTML-side viser vertikalt, så delta i denne delen av koden i CSS, forteller nettleseren for å vise denne listen over elementer på tvers av siden. Type #nav li {display: inline; padding: 0; margin: 0} i CSS stilark.

7 Legg til farger og andre stiler til din link elementer, ikke hele listen over elementer selv. For å gjøre dette, bruker du den #nav link tag. Dette forteller nettleseren for å bruke stiler til linkene og gjør hele fanen klikk-stand. Skriv #nav a: link, #nav en: visited {color: # 000; bakgrunn: # b2b580; }

Hint

  • Du kan gjøre mange forskjellige typer av navigeringslinjer ved å bruke forskjellige farger og stiler på CSS arket. Lær mer om CSS-stiler, og du vil være i stand til å lage svært interessante og attraktive horisontale navigeringslinjer.