Hvordan lage en profesjonell Navigasjons Bar med CSS

June 8

Cascading Style Sheets (CSS) manipulere stil og design av et nettsted. En webside navigasjonsfeltet er bygget ved hjelp UL og LI-koder, HTML-koder som brukes til å lage lister på nettet. Selv om nettlesere gjengi slike koder som punktlister som standard, kan du overstyre formateringen ved hjelp av CSS for å gi området et profesjonelt utseende. Med litt tilpasning, kan du også blande navigasjon med resten av siden din.

Bruksanvisning

1 Åpne et tekstredigeringsprogram, for eksempel Notisblokk, EditPad eller TextPad. Klikk "Fil" og "New" for å opprette en ny CSS-dokument.

2 Sett følgende CSS-koden inn i deg siden. Det setter de øvre og nedre marginer til null på websiden:

kropp {
margin: 0;
padding: 0;
}

3 Sett inn følgende kode under forrige linje med kode. Det skaper en stil for navigasjonsfeltet, som dekker hele bredden av den overordnede container eller seksjon. Det er også venstrejusterer baren (så langt til venstre som mulig av sin container) og gir det en svart bakgrunn. Hvis du vil endre bakgrunnsfarge for navigasjon, endring "svart" til en annen farge, men la semikolon intakt.

nav {

width: 100%;
float: left;
bakgrunn: black;
}

4 Legg til følgende kode under forrige linje med kode. Det fjerner kuler fra UL tag og fjerner marginer og padding:

nav ul {

margin: 0;
padding: 0;
list-style-type: none;
}

5 Legg til følgende CSS-koden under forrige koden. Det gjør at innholdet i navigasjonsskjermen på samme linje:

nav li {

display: inline;
}

6 Legg til følgende kode under de tidligere linjer med kode. Det formaterer koblinger i navigasjon og viser dem som faner. Det gir en vertikal padding av 2 piksler og horisontal padding av 15 piksler til hver kobling. Det fjerner understreking fra linkene, gjør teksten hvit og gjelder en svart bakgrunn. Den legger også en tynn, hvit kant til høyre for hver kobling. For å tilpasse navigasjonsfeltet, endre fargene i koden.

nav ul et {

display: block;
float: left;
padding: 2 piksler 15px;
text-decoration: none;
bakgrunn: black;
Farge: hvit;
border-right: 1px solid hvit;
}

7 Legg til følgende linje med kode for å endre bakgrunnsfargen på fanene når du velger dem:

nav ul a: hover {

bakgrunn: blue;
}

8 Klikk "Fil" og "Lagre" fra menyen. Gi filen navnet "nav.css" i "Lagre som" i dialogboksen. Plasser filen i samme mappe som HTML-fil hvor navigasjonslinjen vil gå. Klikk på "Lagre".

9 Bruk Notepad eller en lignende tekst editor for å åpne HTML-filen der navigasjonslinjen skal plasseres.

10 Bla til "head" -seksjonen, som ligger på toppen av siden, rett under "<HTML>" kode. For å finne riktig klikker mellom "<HEAD>" og "</ HEAD>" og sette inn følgende kode:

11 Rull under åpningen "body" tag og klikk der du vil navigasjonslinjen for å vise. Sett inn følgende kode, men erstatte "#" med nettsiden adressen du kobler til. Erstatt "Link 1," "Link to" og "Link 3" med teksten du vil vise i navigeringen.

12 Klikk "Fil" og "Lagre" fra menyen for å lagre endringene.