Bare de navigare CSS
Deplasarea între diferitele secțiuni ale unui site web este mai ușoară cu o bară de navigare, ceea ce o face o parte importantă a design-ului web.
De obicei o găsești în partea de sus sau pe lateralul unei pagini web, construită din elementele de listă HTML <ul> și <li>, apoi stilizată cu CSS.
Bară de navigare = Listă de linkuri
În esență, o bară de navigare este o listă de linkuri, de aceea <ul> și <li> se potrivesc atât de bine.
Listă de bază de linkuri
Prompt
Creează o bară de navigare de bază folosind o listă neordonată cu patru linkuri: Acasă, Știri, Contact și Despre. Fără stilizare CSS - doar lista brută HTML de linkuri.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar - List of Links</title>
</head>
<body>
<h2>Navigation Bar</h2>
<p>A navigation bar is basically a list of links:</p>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</body>
</html>
Eliminarea bulinelor și a spațierii
Începe prin a elimina bulinele de la elementul <ul> și prin a-i readuce marginile și padding-ul la zero.
Notă: Atât barele de navigare verticale, cât și cele orizontale se bazează pe acest cod.
Prompt
Creează o bară de navigare folosind o listă neordonată cu patru linkuri: Acasă, Știri, Contact și Despre. Elimină bulinele cu list-style-type: none și resetează margin și padding la 0 pe elementul ul.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar - Remove Bullets</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Navigation Bar</h2>
<p>A navigation bar with no bullets, margins, or padding:</p>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</body>
</html>