Hvordan lage en navigasjonsfelt i HTML

Du kan lage et profesjonelt utseende navigasjonsmenylinjen i HTML ved å implementere CSS kode på siden din. Når du oppretter en navigeringslinje, kan du endre noen alternativer som passer dine preferanser, slik at menylinjen riktig passer inn med ditt nettsted. Opprette en navigeringslinje ved hjelp av CSS og HTML krever ingen andre enn en standard teksteditor spesielle programmer.

Bruksanvisning

1 Åpne HTML-siden du ønsker å legge til en navigeringslinje til å bruke en HTML-editor eller tekst editor på datamaskinen.

2 Legg til følgende kode i "<head>" delen av siden:

<Style type = "text / css"> </ style>

3 Legg til følgende kode mellom "<style>" koder innenfor "<head>" delen av nettsiden:

ul # menylinjen

{

margin: 20px;

padding: 0;

list-style: none;

width: 525px;

}

Dette bidrar til å sikre at menylinjen vises på riktig måte i ulike nettlesere, fjerne kulene fra menylinjen og setter en maksimal piksel lengde til listen. Merk at du kanskje må øke "width" verdi basert på hvor mange menyelementer du har i menylinjen og de verdiene du satt til menylinjen i trinn fem.

4 Legg til følgende kode mellom "<style>" koder innenfor "<head>" delen av nettsiden:

ul # menylinjen li

{

display: inline

}

Denne koden linjer opp de forskjellige menyelementene i navigasjonsfeltet slik at de vises riktig i nett.

5 Legg til følgende kode mellom "<style>" koder innenfor "<head>" delen av nettsiden:

ul # menylinjen li en

{

text-decoration: none;

padding: 10px 0;

width: 100px;

bakgrunn: black;

Farge: hvit;

float: left;

}

Denne koden fjerner linjene under lenkene i menylinjen, legger polstring rundt hvert av elementene i menylinjen, legger bredde til hvert av elementene og angir fargen på knappene og teksten i knappene. Alternativt erstatte "5" med siden padding av knappene i piksler eller "0" med øvre og nedre polstring av knappene i piksler. Erstatt "100" med maksimal bredde på knappene i piksler. Erstatt "svart" med bakgrunnsfargen på knappene eller "hvit" med teksten fargen på knappene; du kan også sette den heksadesimale fargekoden for den fargen du ønsker å bruke.

6 Legg til følgende kode mellom "<style>" koder innenfor "<head>" delen av nettsiden:

ul # menylinjen li en

{

text-align: center;

border-left: 1px solid hvit;

}

Denne koden justerer teksten til midten av menylinjen samt legger linje skillevegger mellom menyelementene. Alternativt kan erstatte "1" med en bredde av delelinjen i bildeelementer i menylinjen eller "hvit" med fargen eller heksadesimale kode for fargen på delelinjen.

7 Legg til følgende kode mellom "<style>" koder innenfor "<head>" delen av nettsiden:

ul # menylinjen li a: hover

{

bakgrunn: grønn;

farge: blå

}

Denne koden endrer fargen på knappene i menylinjen når du holder markøren over dem. Alternativt erstatte "grønn" med fargen på menyknappen når du holder markøren over det og "blue" med fargen på teksten når du holder markøren over den. Eventuelt utelate dette, hvis du ikke vil knappene for å endre farger når du holder markøren over dem.

8 Lag en uordnet liste på siden der du vil at menylinjen skal vises. Angi "meny-bar" som ID på listen. Hvert element i listen betyr en knapp på menylinjen. For eksempel:

<Ul id = "meny-bar">

<Li> <a href="Button&lt;/a> & lt; / li "> http://URL.com"> Button & lt; / a> & lt; / li>

<Li> <a href="Button&lt;/a> & lt; / li "> http://URL.com"> Button & lt; / a> & lt; / li>

<Li> <a href="Button&lt;/a> & lt; / li "> http://URL.com"> Button & lt; / a> & lt; / li>

<Li> <a href="Button&lt;/a> & lt; / li "> http://URL.com"> Button & lt; / a> & lt; / li>

<Li> <a href="Button&lt;/a> & lt; / li "> http://URL.com"> Button & lt; / a> & lt; / li>

</ Ul>

Erstatt "http://URL.com" for hvert listepunkt med hyperlink som du vil tilordne til menyknappen og "Button" med teksten du vil skal vises på knappen. Legg til så mange listeelementer som du ønsker. Eksempelet ovenfor har fem knapper i menylinjen.

9 Lagre filen og laste den opp til webserveren din.