Das beste CSS Navigationsleiste-Tutorial im Jahr 2024. In diesem Tutorial können Sie Beispiel: Navigationsleiste,Navigationsleiste,Navigation Links list =,Beispiele,Beispiele,Vertikalen Navigationsleiste,Beispiele,Horizontale Navigationsleiste,Inline-Listenelemente,Beispiele,Schwimmdock Listenelemente,Beispiele, lernen
Skilled Verwendung Navigation für jede Website ist sehr wichtig.
Mit CSS können Sie in eine schöne Navigationsleiste umwandeln statt langweiligen HTML-Menüs.
Als Standard ist HTML-basierte Navigationsleiste ein Muss
. In unserem Beispiel werden wir eine Standard-HTML-Liste Navigationsleiste erstellen.
Die Navigationsleiste ist im Grunde eine Liste von Links, so verwenden <ul> und <li> Elemente sind sehr sinnvoll:
Nun lassen Sie uns entfernen Margen und Polsterung aus der Liste:
Beispiele der Analyse:
Das obige Beispiel-Code ist in den Standard vertikalen und horizontalen Navigationsleiste Codes verwendet.
Der obige Code, brauchen wir nur <a> Stilelemente, eine vertikale Navigationsleiste Gründung:
Das Beispiel zeigt:
Tipp: Siehe Beispiel eines voll Stil vertikalen Navigationsleiste .
Hinweis: Stellen Sie sicher , dass die Breite des Elements in der vertikalen Navigationsleiste <a> angeben 's.Wenn Sie die Breite nicht angeben, kann IE6 zu unerwarteten Ergebnissen führen.
Es gibt zwei Möglichkeiten, um eine horizontale Navigationsleiste zu erstellen. Verwenden SieInline - oder Floating- Listeneinträge.
Beide Verfahren sind in Ordnung, aber wenn man auf die gleiche Größe verknüpfen möchten, müssen Sie die Floating-Methode verwenden.
Eine eine horizontale Navigationsleiste zu bauen, ist zu spezifizieren
Analyse Beispiele:
Tipp: Siehe Beispiel eines voll Stil horizontalen Navigationsleiste .
In dem obigen Beispiel Verbindungen weisen unterschiedliche Breiten auf.
Für alle Links gleicher Breite, float <li> -Element und die Breite des Elements <a> angeben:
Analyse Beispiele:
Tipp: Siehe Beispiel eines voll Stil horizontalen Navigationsleiste. .