So erstellen Sie eine Navigationsleiste in HTML?
Die Navigationsleiste ist die Hauptkomponente jeder Webseite/Website. Eine Navigationsleiste könnte in der horizontalen oder vertikalen Richtung sein. In Anbetracht der Bedeutung von Navigationsleisten skizziert dieser Beitrag verschiedene Methoden, um eine Navigationsleiste in HTML zu erstellen. Die möglichen Ergebnisse dieses Blogs sind:
- So erstellen Sie eine horizontale Navigationsleiste in HTML?
- So erstellen Sie eine vertikale Navigationsleiste in HTML?
Methode 1: So erstellen Sie eine horizontale Navigationsleiste in HTML?
HTML -Dokument ist die Kombination von Hunderten von Tags. Jedes Tag bezieht sich auf eine bestimmte Funktionalität. Darüber hinaus können Sie mehrere Elemente kombinieren, um auch ein benutzerdefiniertes Design zu erstellen. Eine Navigationsleiste kann mit Hilfe von erstellt werden
- Und
- Stichworte. Dieser Abschnitt enthält eine detaillierte Anleitung zum Erstellen horizontaler Balken in HTML.
Der HTML -Code zum Erstellen einer horizontalen Navigationsleiste wird unten angezeigt.
Html
Erstes Dokument
In diesem Code:
- Wir haben eine geschaffen .
- In der Liste wird eine Liste erstellt, indem Sie
- Schild.
- Um die Elemente in hinzuzufügen
- Tag, wir haben die Listenelemente mithilfe der Elemente eingefügt
- Schild.
- Zuletzt fügen wir im Tag im Tag die Links mit dem Tag mit dem Tag zu anderen HTML -Seiten ein.
Für eine bessere Präsentation wird der folgende CSS -Code auf die HTML angewendet.
CSS
ul
Listenstil: Keine;
li a
Textdekoration: Keine;
Bildschirmsperre;
float: links;
Polsterung: 10px 15px;
Schriftgröße: 20px;
Hintergrundfarbe: Lightgray;
Farbe: Schwarz;
Schriftfamilie: Georgia, "Times New Roman", Times, Serif;
Li A: Schwebe
Hintergrundfarbe: LightSalmon;
Farbe weiß;
Im obigen Code:
- Die Styling -Eigenschaft der Liste ist auf keine festgelegt.
- Darüber hinaus verschiedene CSS-Eigenschaften, einschließlich (Textdekoration, Anzeige, Float usw.) werden in den Listenelementen angewendet.
- Ein Schwebeffekt wird auch zu dem hinzugefügt Schild.
Ausgang
Die Ausgabe zeigt, dass wir mit HTML und CSS erfolgreich eine horizontale Navigationsleiste erstellt haben.
Methode 2: So erstellen Sie eine vertikale Navigationsleiste in HTML?
Die primären Zutaten (
- ,
- ) sind für vertikale und horizontale Balken gleich. Daher ist eine vertikale Balken leicht zu erstellen. In diesem Beispiel haben wir den folgenden Code ausgeübt, um eine Navigationsleiste in HTML zu erstellen:
Html
Erstes Dokument
In diesem Code:
- Wir haben eine Liste mit dem erstellt
- Schild.
- In der
- Tag, wir haben die Listenelemente mit dem eingefügt
- Schild.
- Anschließend haben wir die Links zu anderen HTML -Seiten mit dem Tag mit dem Tag eingefügt.
Für eine bessere Ästhetik der Navigationsleiste haben wir den folgenden CSS -Code verwendet und in eine externe CSS -Datei platziert:
CSS
ul
Listenstil: Keine;
li a
Textdekoration: Keine;
Bildschirmsperre;
Breite: 180px;
Polsterung: 10px 15px;
Schriftgröße: 20px;
Hintergrundfarbe: Lightgray;
Farbe: Schwarz;
Schriftfamilie: Georgia, "Times New Roman", Times, Serif;
Li A: Schwebe
Hintergrundfarbe: LightSalmon;
Farbe weiß;
Im obigen CSS -Code:
- Das Listenstyling ist auf keine festgelegt.
- Auf den Listenelementen werden mehrere Stile angewendet.
- Schließlich wird auch der Schwebeffekt auf die Elemente der Liste angewendet.
Ausgang
Die Ausgabe zeigt, dass wir erfolgreich eine vertikale Navigationsleiste erstellt haben.
Bitte schön! Sie haben gelernt, eine horizontale und vertikale Navigationsleiste in HTML zu erstellen.
Abschluss
In HTML können wir eine Navigationsleiste erstellen, indem wir eine einfache Liste erstellen
- ,
- und Tags. Eine Navigationsleiste kann entweder vertikal oder horizontal sein. Darüber hinaus können Sie ihm verschiedene Stile hinzufügen, indem Sie das CSS anwenden. Dieser Beitrag hat die Methoden zum Erstellen von Navigationsbalken in HTML gezeigt. Mit Hilfe einer Navigationsleiste kann man zu den verschiedenen Seiten der Website navigieren.
- Wir haben eine Liste mit dem erstellt