Sette inn en horisontal navigasjonsfelt

Navigeringslinjer gjør det lettere for folk som besøker nettstedet ditt for å navigere gjennom det, og nesten hver nettside har en navigeringslinje eller annet sted på den. En av de mest ofte sett navigeringslinjer er den horisontale en som går over toppen av en webside. Hvis du ønsker å sette inn en horisontal navigasjonslinjen på nettstedet ditt, du trenger bare den riktige CSS-kode.

Bruksanvisning

1 Åpne koden til websiden som du vil sette inn en horisontal navigasjonsfeltet.

2 Kopier og lim inn følgende kode inn i hodet av dokumentet:

<Style type = "text / css">

.hovermenu ul {

font: fet 13 piksler arial;

padding-left: 0;

margin-left: 0;

height: 20px;

}

.hovermenu ul li {

list-style: none;

display: inline;

}

.hovermenu ul li a {

padding: 2 piksler 0.5em;

text-decoration: none;

float: left;

color: black;

background-color: # FFF2BF;

border: 2px solid # FFF2BF;

}

.hovermenu ul li a: hover {

background-color: # FFE271;

border-style: begynnelsen;

}

html> body .hovermenu ul li a: active {/

Påfør mousedown effekt kun til ikke IE nettlesere /

border-style: innfelt;

}

</ Style>

3 Kopier og lim inn følgende kode inn i kroppen av dokumentet, erstatter de nettadresser med nettadresser til de sidene du ønsker navigasjonslinjen for å koble til:

<Div class = "hovermenu">

<Ul>

<Li> <a href="title"> http://www.website.com "> tittelen en </a> </ li>

<Li> <a href="title"> http://www.website.com "> tittelen to </a> </ li>

<Li> <a href="title"> http://www.website.com "> tittelen tre </a> </ li>

<Li> <a href="title"> http://www.website.com "> tittelen fire </a> </ li>

<Li> <a href="title"> http://www.website.com "> tittelen fem </a> </ li>

</ Ul>

</ Div>

4 Lagre endringene i dokumentet.

Hint

• Endre noen av verdiene som ligger etter kolon for å endre utseendet på din horisontale navigasjonslinjen.
• Pass på at du lar alle tegnsetting intakt, ellers koden kanskje ikke fungere.