Hvordan lage en Navbar CSS
En navigasjonsfeltet (navbar), eller meny, kan plasseres horisontalt over toppen eller bunnen av en webside. Det kan også være plassert vertikalt langs hver side av siden. Navigasjonsmenyen er en liste over linker med stiler lagt for å fjerne kuler og nummerering og plassere linkene riktig på siden. Du kan opprette en ekstern CSS-fil som inneholder navbar stiler, slik at navbar vil se det samme på hver webside på hele nettstedet.
Bruksanvisning
CSS Portion (horisontal)
1 Åpne et tomt vanlig tekstdokument.
2 Skriv inn følgende linjer:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Dette vil fjerne kuler eller nummerering fra HTML-listen.
3 For å tvinge listeelementene til å stille opp horisontalt, snarere enn vertikalt, skriver du inn følgende linjer:
li
{
display: inline;
}
Alternativt kan du flyte listeelementene ved å erstatte "display: inline;" med "float: left;" og legge til følgende linjer i filen:
en
{
display: block;
bredde: 50 piksler;
}
4 Lagre filen med "Css" filtypen (dvs. "navbar.css").
CSS Portion (vertikal)
5 Åpne et tomt vanlig tekstdokument.
6 Skriv inn følgende linjer:
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Dette vil fjerne kuler eller nummerering fra HTML-listen.
7 For å gjøre det hele koblingen området klikkbar og angi bredden, skriver du inn følgende linjer:
en
{
display: block;
bredde: 50 piksler;
}
Elementene dekker hele bredden av blokken.
8 Lagre filen med "Css" filtypen (dvs. "navbar.css").
HTML Portion
9 Åpne et tomt vanlig tekstdokument.
10 Til å begynne HTML-dokumentet, TPE linjen:
<Html>
11 Hvis du vil koble til CSS-filen, skriver linjene:
<Head>
<Link rel = "stylesheet" type = "text / css" href = "navbar.css" />
</ Head>
12 For å opprette navigasjonsmenyen, skriver du inn følgende linjer:
<Body>
<Ul>
<Li> <a href="example1.html"> Link 1 </a> </ li>
<Li> <a href="example2.html"> Link to </a> </ li>
<Li> <a href="example3.html"> Link 3 </a> </ li>
<Li> <a href="example4.html"> Link 4 </a> </ li>
</ Ul>
</ Body>
Erstatt "example1.html", "example2.html", "example3.html" og "example4.html" med nettadresser for koblinger. Erstatt "Link 1," "Link to", "Link 3" og "Link 4" med teksten du ønsker synlige i navigasjonsmenyen.
1. 3 Lagre filen med ".html" filtypen.
14 Åpne filen i en hvilken som helst nettleser for å se navigasjonslinjen.