Det er vigtigt for ethvert websted at have nem at bruge navigation.
Med CSS kan du forvandle kedelige HTML-menuer til flotte navigationslinjer.
En navigationslinje har brug for standard HTML som base.
I vores eksempler vil vi bygge navigationslinjen ud fra en standard HTML-liste.
En navigationslinje er dybest set en liste over links, så brug af <ul>- og <li>-elementerne gør mester følelse:
Prøv det selv →
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Lad os nu fjerne punkttegnene og margener og polstring fra listen:
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Eksempel forklaret:
list-style-type: none;- Fjerner kuglerne. En navigationslinje behøver ikke listemarkører
margin: 0;for at fjerne browserens standardindstillinger
padding: 0;for at fjerne browserens standardindstillinger
Koden i eksemplet ovenfor er standardkoden, der bruges i både lodrette og vandrette navigationslinjer, som du vil lære mere om i de næste kapitler.