Hvordan lage Tabs for Nettsider
Fanene viser koblinger i en nettside navigasjon, enten horisontalt eller vertikalt. En fane kan inkludere en grense, bakgrunnsfarge, bakgrunnsbilde eller annen formatering. Du kan tilpasse faner for å matche din generelle side design med gjennomgripende stilark (CSS). Når CSS-kode er opprettet, bare bruke den i HTML-koden for de spesifikke kategorier som du ønsker å lage og sette inn linker til å åpne i en ny eller eksisterende vindu.
Bruksanvisning
1 Åpne HTML-fil som du ønsker å endre i et tekstredigeringsprogram, for eksempel Notisblokk, TextPad eller EditPad.
2 Sett følgende CSS-koden mellom <HEAD> tag. Det instruerer nettleseren for å vise faner med gul bakgrunn og bytte til en rød bakgrunn når en fane er valgt. Koden "display: inline" under "#mainNav li" viser fanene side-by-side og "background-color" setter bakgrunnsfargen for fanene:
<Style type = "text / css">
ul # mainNav {
margin: 0px;
padding: 0px;
border-bottom: 5px solid # F00;
}
mainNav li {
display: inline;
position: relative;
}
mainNav li a {
text-decoration: none;
background-color: # FF0;
font-weight: bold;
padding-left: 10px;
padding-right: 10px;
color: # 000;
}
mainNav li a: hover {
text-decoration: none;
background-color: # F00;
}
</ Style>
3 Change "background-color: # FF0" under "#mainNav li en" til den fargen du vil vises når faner ikke er valgt (se "Ressurser" nedenfor).
4 Change "background-color: # FF0" under "#mainNav li a: hover" til den fargen du vil vises når kategoriene er valgt (se "Ressurser" nedenfor).
5 Sett inn følgende HTML-kode mellom <BODY> tag der du vil kategoriene vises:
<Ul id = "mainNav">
<Li> <a href="tab1website.com"> My First Page </a> </ li>
<Li> <a href="tab2website.com"> My Second Side </a> </ li>
<Li> <a href="tab3website.com"> Min tredje siden </a> </ li>
</ Ul>
6 Bytt ut linker "tab1website.com", "tab2website.com" og "tab3website.com" med de faktiske linkene for navigasjon. Erstatt "My First Page", "Mitt andre siden" og "My Third side" med teksten som du vil vise i navigasjon.
7 Gjenbruk følgende kode for å legge til flere faner til navigasjon og sett den inn mellom <ul> tag:
<Li> <a href="your-webpage-link.com"> Din tekst her </a> </ li>
8 Velg "Fil" og "Lagre" for å lagre HTML-fil.