Hvordan lage en enkel navigasjon Bar i CSS

Nettstedet navigeringslinjer er vanligvis laget ved hjelp av Hypertext Markup Language (HTML) bord, men en bedre måte å gjøre dette på er å bruke Cascading Style Sheets (CSS). Med CSS kan du lage en meny som vises med hell i de fleste nettlesere og som krever mindre kode, noe som resulterer i raskere side-lasting. Bruk datamaskinens tekst editor program for å gå inn i HTML og CSS som gjør en enkel navigasjonsfeltet på siden din.

Bruksanvisning

1 Start teksteditor programmet og åpne en nettside fil. Plasser markøren i området der du vil at navigasjonsfeltet skal vises.

2 Tast koden for en HTML-sorterte liste for å lage kroppen av navigasjonslinjen. Skriv inn et par <li> </ li> koder for hvert menyelement du ønsker å vise og skrive inn den tilhørende linken adresse mellom disse kodene som i følgende eksempel:

<Ul>

<Li> <a href="home.html"> Hjem </a> </ li>

<Li> <a href="about.html"> Om </a> </ li>

<Li> <a href="contact.html"> Kontakt </a> </ li>

</ Ul>

3 Rull til toppen av siden din og skriv inn følgende CSS-kode før den avsluttende </ head> element:

<Style type = "text / css">

ul {}

li {}

</ Style>

Den sorterte liste (ul) oppretter en regel som styrer det helhetlige utseendet av listen, mens listen (li) gjør en stil for hvert listepunkt.

4 Skriv "list-style-type: none;" inne i sorterte liste regel parentes å fjerne standard kuler fra listen. Videre skriver "margin: 0px;" og "padding: 0px;" å kvitte seg med noen innstillinger pålagt av nettleseren din. Å illustrere:

ul {list-style-type: none; margin: 0px; padding: 0px; }

5 Type "display: inline;" inne på listen regel å lage en horisontal navigasjonsmeny eller bar. Din ferdig CSS-kode for navigasjonslinjen ser slik ut:

<Style type = "text / css">

ul {list-style-type: none; margin: 0px; padding: 0px; }

li {display: inline; }

</ Style>

6 Lagre filen.