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.