Hoe maak je een navigatiebalk maken

Hoe maak je een navigatiebalk maken


Maak uw eigen horizontale navigatiebalk, of "navbar," met lijnen van html code. HTML en CSS-code wordt getypt in een teksteditor zoals Kladblok, waarin informatie zoals tekst, kleur en links in de code worden ingevoerd. Zodra je de code hebt toegevoegd aan uw website, uw lezers hebben de tools om de andere pagina's van uw site te bezoeken.

instructies

1 Open het Kladblok programma.

2 Maak de verschillende schakels van uw navbar en de opvulling en marges voor het door het kopiëren en plakken van de volgende in uw Kladblok:

<Ul id = "list-nav">
<Li> <a href="#"> Thuis </a> </ li>
<Li> <a href="#"> Over ons </a> </ li>
<Li> <a href="#"> Services </a> </ li>
<Li> <a href="#"> producten </a> </ li>
<Li> <a href="#"> Contact </a> </ li>
</ Ul>

ul # list-nav {
margin: 20px;
padding: 0;
list-style: none;
width: 525px;
}

3 Maak de navigatiebalk gaan in een lijn over de webpagina door het kopiëren en plakken van de volgende in uw Kladblok:

ul # list-nav li {
weergave: inline
}

4 Maak de links voor de navigatiebalk door het kopiëren en plakken van de volgende:

ul # list-nav li a {
text-decoration: none;
padding: 5px 0;
width: 100px;
background: # 485e49;
kleur: #eee;
float: left;

5 Lijn de tekst in de navigatiebalk door het kopiëren en plakken van de volgende:

ul # list-nav li a {
text-align: center;
border-left: 1px solid # fff;
}

6 Maak een rollover kleur door het kopiëren en plakken van de volgende:

ul # list-nav li a: hover {
background: # a2b3a1;
color: # 000
}

7 Wijzig de kleuren door te typen in de code voor de kleur van uw keuze. Vind alle "#" symbolen en ze te vervangen door de URL-adressen aan de links voor het scheppen van "Thuis", "Over ons", "Services", "producten" en "Contact."

8 Sla de navigatiebalk code bestand in Kladblok. Druk op 'Ctrl' + 'A' om alles te selecteren. Open uw webpagina en ga naar de CSS HTML-editor. Druk op 'Ctrl' + "V" om de navigatiebalk code te kopiëren. Sla de code in te voeren in uw webpagina.