Hvordan lage en horisontal navigasjonsfeltet med CSS

En navigasjonslinjen hjelper de besøkende få tilgang til alle områder av din nettside eller blogg. Hvis du ønsker å lage en horisontal navigasjonslinjen, snarere enn en vertikal en, kan du gjøre det ved å opprette en enkel HTML (Hypertext Markup Language) liste og bruke CSS (Cascading Style Sheets) stiler til koden. Denne listen krever ingen spesielle skript og vil vises i alle nettlesere som støtter CSS, inkludert mobile enheter lesere.

Bruksanvisning

1 Sett inn følgende kode etter åpningen "<head>" tag i HTML-dokumentet, og før den avsluttende </ head> tag.

<Style type = "text / css">

navbar li

{

display: inline;

margin: 5px 0;

list-style-type: none;

}

navbar en

{

text-decoration: none;

}

</ Style>

2 Lim inn følgende kode etter "<body>" tag i HTML-elementet for å lage en liste som vil være grunnlaget for navigasjonslinjen.

<Ul id = "navbar">

<Li> <a href="URL1"> Link 1 </a> </ li>

<Li> <a href="URL1"> Link to </a> </ li>

<Li> <a href="URL1"> Link 3 </a> </ li>

<Li> <a href="URL1"> Link 4 </a> </ li>

</ Ul>

3 Endre verdiene for "nettadressen1", "URL2" og så videre til selve linker hvor du ønsker å lede de besøkende. Endre koblingen teksten - "Link1" og "Link2" blant andre - til beskrivende tekst som vil informere de besøkende der koblingene fører. Du kan legge til tekst uten lenker ved å legge til en linje som ligner på dette i listen:

<Li> Din tekst her </ li>

4 Tilpass navigasjonslinjen ved å legge stiler i CSS i hodet av dokumentet. For eksempel kan du legge til en grunnleggende bakgrunnsfarge (svart), skriftfarge (rød) og border (grå) med følgende endringer:

navbar li

{

display: inline;

margin: 5px 0;

list-style-type: none;

padding: 5px;

border: 1px solid # 808080;

bakgrunn: # 000;

color: # FF0000;

}

navbar en

{

text-decoration: none;

color: # FF0000;

}

5 Lagre HTML / Web-dokument.

Hint

  • Hvis listen er bredere enn den besøkendes skjerm, vil det hopper til neste linje.
  • Du kan bruke nesten alle CSS eiendom til listen, individuelle listeelementer eller inneholdt lenke test.
  • Link navnene bør klart forklare måls.
  • Hvis du har en egen CSS-fil, setter navigasjons CSS i denne fila og lagre den. Legg listen HTML til din webside / HTML-fil.