Hvordan kode en NAV Bar i CSS

Hvis du vil at brukerne skal forstå det generelle oppsettet av nettstedet ditt, og skaper en CSS nav bar for siden din kan være nyttig. En nav bar forteller brukerne som deler av siden eksisterer og lar dem finne disse delene lett. Hvis du ønsker å kode en nav bar, må du først vite hvilke deler du ønsker å referere til, og hva deres webadresser er.

Bruksanvisning

1 Logg inn på din webserver og åpne HTML-siden der du vil sette inn nav bar.

2 Klikk i <head> -delen av dokumentet og sett inn følgende CSS tekst:

<Style type = "text / css">

ul

{

list-style-type: none;

margin: 0;

padding: 0;

padding-top: 6PX;

padding-bottom: 6PX;

}

li

{

display: inline;

}

a: link, a: besøkte

{

font-weight: bold;

color: #FFFFFF;

background-color: # 98bf21;

text-align: center;

padding: 6px;

text-decoration: none;

text-transform: store bokstaver;

}

a: hover, en: aktiv

{

background-color: # 7A991A;

}

</ Style>

3 Endre alfanumeriske koder i forbindelse med "farge" og "bakgrunnsfarge" hvis ønskelig. Se "Ressurser" for flere fargekoder.

4 Klikk på <body> -delen av siden din.

5 Sett inn følgende kode:

<Ul>

<Li> <a href="New"> http://www.website.com/newinformation">New Informasjon </a> </ li>

<Li> <a href="Contacts&lt;/a> & lt; / li "> http://www.website.com/Contacts"> Kontakter & lt; / a> & lt; / li>

<Li> <a href="About"> http://www.website.com/aboutthecompany">About selskapet </a> </ li>

<Li> <a href="Home&lt;/a> & lt; / li "> http://www.website.com/home"> Home & lt; / a> & lt; / li>

</ Ul>

6 Skift URL og teksten på displayet i hver linje som du bare limt med selve skjermen teksten og nettadressen du vil åpne når den blir klikket.

7 Publiser siden.