Hvordan bygge en Navigation Bar

May 13

En navigasjonslinjen er en viktig del av nettstedet ditt som du vil ønske å ha hvis du har flere deler eller sider på nettstedet ditt. Brukere må klikke "Tilbake" knappen eller bruke adresselinjen for å navigere i et område uten en navigeringslinje, noe som kan være forvirrende og kan gjøre det vanskelig for brukerne å se alle at et nettsted har å tilby. Opprette en navigeringslinje krever CSS og HTML ferdigheter.

Bruksanvisning

1 Logg inn på din webserver og åpne HTML siden der du vil legge til navigasjonsfeltet.

2 Klikk på siden like etter åpningen <head> -taggen. Sett følgende CSS-kode:

{

list-style-type: none;

margin: 0;

padding: 0;

padding-top: 6PX;

padding-bottom: 6PX;

}

{

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 Klikk markøren mellom <body> og </ body> kodene for den delen hvor du vil inkludere navigasjonslinjen. Sett inn følgende HTML-kode:

<Ul>

<Li> <a href="Blog</a> & lt; / li "> http://www.website.com/blog"> Blogg & lt; / a> & lt; / li>

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

<Li> <a href="Purchase</a> & lt; / li "> http://www.website.com/buy"> Kjøp & lt; / a> & lt; / li>

<Li> <a href="More</a> & lt; / li "> http://www.website.com/more"> Mer & lt; / a> & lt; / li>

</ Ul>

4 Bytt ut URL i hver tekstlinje med URL-adressen til websiden som du vil åpne når en bruker klikker den tilsvarende delen av navigasjonslinjen.

5 Erstatt "Blog", "Business Information", "kjøp" og "Mer" med teksten du vil skal vises på navigasjonslinjen.

6 Publiser siden.

Hint

Du kan bytte ut "farge" koder i HTML med hvilken som helst farge du vil bruke. To prøvefargekoder er "# 2B60DE" for kongeblå og "# FF0000" for rødt. Se Ressurser for en liste over fargekoder.