Hvordan lage en stil CSS med horisontal navigasjon

February 26

Opprette en horisontal navigasjonslinjen kan være en effektiv måte å tillate brukere av nettstedet ditt for å navigere til forskjellige sider uten å stole på hyperkoblinger og "front" og "tilbake" i nettleseren knapper. Når du oppretter en horisontal navigasjonslinjen, må du sette inn noen HTML-koding samt noen CSS koding. Disse to kodene fungerer sammen, selv om de befinner seg i ulike deler av HTML-dokumentet.

Bruksanvisning

1 Logg inn på din webserver og åpne HTML-siden der du vil sette inn den horisontale navigasjonslinjen.

2 Klikk i <head> delen av siden og sette inn denne CSS-kode:

navcontainer ul

{

padding-left: 1;

margin-left: 1;

background-color: # 036;

Farge: Hvit;

float: left;

width: 100%;

font-family: arial, helvetica, sans-serif;

}

navcontainer ul li {display: inline; } Navcontainer ul li en

{

padding: 0.2em 1em;

background-color: # 036;

Farge: Hvit;

text-decoration: none;

float: left;

border-right: 2px solid #fff;

}

navcontainer ul li a: hover

{

background-color: # 369;

farge: #fff;

}

3 Klikk i <body> -delen av siden i stedet der du vil sette inn horisontal navigasjon og innsats:

<Li id = "aktiv"> <a href="#" id="current"> Nyheter </a> </ li>

<Li> <a href="#"> Kontakt oss </a> </ li>

<Li> <a href="#"> Joint Team </a> </ li>

</ Ul>

</ Div>

4 Bytt ut "Blogg", "Om oss" og andre oppføringer med selve teksten du vil skal vises i navigasjonsfeltet.

5 Bytt ut "#" i hver linje med nettadressen du vil åpne når teksten på navigasjonslinjen klikkes.

6 Publiser siden. Sjekk funksjoner.