Hvordan få Web navigasjonsfelt

September 7

En metode for navigasjon er en forutsetning for enhver nettside med mer enn én side. Den enkleste måten å gi besøkende tilgang til alle sidene på nettstedet ditt er å sette ankerkoder innenfor hver sidens HTML-kode. Imidlertid kan denne metoden forvirre besøkende som forventer å finne en standard navigasjonsmeny i stedet for en samling av tilfeldige koblinger. Plassere disse koblingene i en bar er en enkel prosess som gir området et mer profesjonelt utseende og reduserer lagets potensial forvirring.

Bruksanvisning

1 Lag et stilark for navigasjonslinjen. I "head" -seksjonen på HTML-koden, skriv:

2 Gi navnet "nav" til baren stil og definere egenskapene til baren. I dette tilfellet er linjen strekker seg over toppen av hele nettleservinduet. Menyelementene er trykt i blått på en lys grå bakgrunn med mørk grå grenser. Enkelte menypunktene lyser rødt når du holder musepekeren over dem. Dette oppnås med denne kode:

nav {

width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: # f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }

nav li {

float: left; }

nav li a {

display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: # 069;
border-right: 1px solid #ccc; }

nav li a: hover {

color: # C00;
background-color: #fff; }

3 Lukk stilark med den avsluttende koden:

</ Style>

4 Lag en uordnet liste i "kroppen" i HTML-koden. Tildele "nav" stil til listen med denne uttalelsen:

5 Skriv en liste over menyelementer. Definere hvert element som en link til en side på nettstedet ditt. I dette tilfellet har koblinger til Om, kontakt, FAQ og hjemmesider med denne koden:

<Li> <a href="about.html"> Om oss </a> </ li>
<Li> <a href="contact.html"> Kontakt </a> </ li>
<Li> <a href="faq.html"> Spørsmål </a> </ li>
<Li> <a href="index.html"> Hjem </a> </ li>

Hint

Dette stilarket kan du legge til og fjerne menyelementer i i "kroppen" delen av koden uten behov for å endre stilark selv. Nye elementer legges til slutten av menyen og eksisterende elementer er flyttet til venstre når et valg er slettet.