Wie kann Flexbox verwendet werden, um eine Navigationsleiste zu erstellen??
Die Flexbox ist die beste Wahl, um eine Navigationsleiste zu erstellen, insbesondere wenn es um Reaktionsfähigkeit geht. Die Flexbox erleichtert die Ausrichtung von Elementen im Container, bietet Abstand und ermöglicht automatisch Elemente, Änderungen entsprechend dem verfügbaren Platz anzuwenden. Aufgrund seiner Querbrowser-Kompatibilität bleibt das Styling in mehreren Versionen von Browsern gleich bleiben.
Dieser Artikel zeigt, wie Sie eine Navigationsleiste mit dem FlexBox -Layout erstellen, das umfasst:
- Navigationsleistenstruktur
- Styling von Navi und Logo
- Styling von Menüpunkten
- Styling der Schaltfläche und Suchstaste
Wie kann Flexbox verwendet werden, um eine Navigationsleiste zu erstellen??
Mit der Navigationsleiste kann der Benutzer mehrere Webseiten auf der Website durchqueren. Es enthält eine Suchleiste, soziale Ikonen und viele mehr. Befolgen Sie die folgenden detaillierten Schritte, um eine Navigationsleiste mit dem FlexBox -Layout zu erstellen:
Schritt 1: Navigationsleistenstruktur
Der erste Schritt besteht darin, eine Struktur für die Navigationsleiste mit HTML zu erstellen. Zum Beispiel enthält die Navigatte "Logo ”,„ Menüelemente “und„ Suchleiste"Mit einem Einreichen"Taste”:
Die Erklärung des obigen Codes lautet wie folgt:
- Erstellen Sie zuerst eine “”Tag in der“" Schild. Es enthält alle Elemente, die Teil der Navigationsleiste werden.
- Das halten "Logo"Des Unternehmens/der Website erstellen Sie eine"”Tag und zuweisen Sie es eine Klasse von“Logos”. Später wird diese Klasse verwendet, um dem Logo ein Styling zu verleihen.
- Verwenden Sie danach die ungeordnete Liste “
- Am Ende erstellen Sie die “Eingang"Feld mit einem Typ"Text", Und benutze eine"Taste"Das ist in die" gewickelt ""Tag der Klasse"suchen”.
Nach der Ausführung des oben genannten Code wird die Webseite so angezeigt:
Die Ausgabe zeigt, dass die Navigationsstruktur auf dem Bildschirm angezeigt wurde.
Schritt 2: Styling von Navi und Logo
Wählen Sie zunächst die "NavigationElement -Selektor, die die "auswählen"”Tag aus der HTML -Datei. Wählen Sie danach das Logo -Bild und das Div aus, indem Sie darauf zugreifen, indem Sie es über die “zugreifenLogosKlasse und Anwenden von CSS -Eigenschaften wie unten:
navAnzeige: Flex;
Rechtfertigungsbekämpfung: Weltraum zwischen;
Ausrichtung: Zentrum;
Hintergrundfarbe: #333;
Polsterung: 10px;
.logos
Margin-Right: Auto;
.logos img
Breite: 100px;
Die Erläuterung des obigen Code -Snippets lautet:
- Zuerst die "biegen" Und "Weltraum dazwischen"Werte werden auf" gesetzt "Anzeige" Und "Rechtfertigungsbekämpfung" Eigenschaften. Diese Eigenschaften richten die Div -an Seite nebeneinander aus und setzen die “Navigation"Tag als"biegen" Layout.
- Dann die Werte von „Zentrum“, “#333" Und "10px"Werden der" zugeordnet "Ausrichtung","Hintergrundfarbe", Und "PolsterungEigenschaften. Diese CSS -Eigenschaften werden für einen besseren Visualisierungsprozess verwendet.
- Wählen Sie am Ende das Logo -Bild aus und geben Sie ihm eine “Breite”Von 100px und setzen die“Auto"Wert zum"Randrecht" Eigentum.
Nach Ausführung des obigen Codes sieht die Webseite so aus:
Die obige Ausgabe zeigt an, dass das Flex -Layout auf der “eingestellt ist“Navigation”Tag, und das Logo -Bild ist auf der linken Seite festgelegt.
Schritt 3: Styling von Menüpunkten
Um Stile auf Menüschaltflächen anzuwenden, wählen Sie die entsprechenden Div -Klassen und wenden Sie die folgenden CSS -Eigenschaften auf sie an:
.SpeisekarteAnzeige: Flex;
Listenstil: Keine; Rand: 0;
Polsterung: 0;
.Menuitem
Rand: 0 10px;
.Menuitem a
Farbe: #fff;
Textdekoration: Keine;
Die Erklärung des obigen Codes lautet:
- Setzen Sie zunächst die Menüelemente als Flexelemente, indem Sie die Werte von “angebenbiegen" Und "keiner" zum "Anzeige" Und "Listenstil" Eigenschaften.
- Als nächstes null als Wert dem CSS zuweisen “Polsterung" Und "Rand" Eigenschaften. Dadurch werden alle auf die Listenelemente angewendeten vordefinierten Margen und Polsterung entfernt.
- Wählen Sie danach die "Menuitem”Klasse und die“AnkerElement, das darin wohnt. Setzen Sie auch die Farbe des Elements auf “#F f f”.
- Am Ende sorgen "keiner"Als Wert, um vordefinierte Stile in die CSS zu entfernen"Textdekoration" Eigentum.
Nach dem Hinzufügen des oben genannten Code wird die Webseite jetzt so angezeigt:
Die Ausgabe zeigt an, dass die Menüelemente jetzt gestaltet sind.
Schritt 4: Styling der Schaltfläche und Suchschaltfläche
Wählen Sie mit den Direktelement -Selektoren die ausEingang" Und "Taste”HTML -Elemente in der CSS -Datei. Und wenden Sie die folgenden CSS -Eigenschaften an, um die Sichtbarkeit des Benutzers zu verbessern:
EingangPolsterung: 5px;
Grenze: Keine;
Border-Radius: 3px 0 0 3px;
Taste
Hintergrundfarbe: #555;
Farbe: #fff;
Grenze: Keine;
Polsterung: 5px 10px;
Border-Radius: 0 3px 3px 0;
Cursor: Zeiger;
Die Erläuterung des obigen Codes ist unten angegeben:
- Verwenden Sie die “Polsterung","Grenze", Und "Grenzradius”Um das Styling auf das Eingabefeld anzuwenden.
- Setzen Sie den Wert von “#555" Und "#F f f" zum "Hintergrund" Und "Textfarbe”Eigenschaften für das Tastenelement.
- Danach setzen Sie die "Zeiger" Und "keiner"Als Wert für die"Mauszeiger" Und "Grenze" Eigenschaften.
- Andere CSS-Eigenschaften können ebenfalls verwendet werden, um das Design reaktionsschneller und auffälliger zu gestalten.
Nachdem der obige Code -Snippet ausgeführt wurde, sieht die Ausgabe so aus:
Die Ausgabe zeigt an, dass die Navigationsleiste jetzt mit Flexbox erfolgreich erstellt wird.
Abschluss
So erstellen Sie eine Navigationsleiste mit Flexbox, setzen Sie die “biegen" Und "Weltraum dazwischen"Werte zum"Anzeige"Und Eigenschaften" Rechtfertigungsbekämpfung "innerhalb der"" Schild. Danach sorgen "biegen"Als Wert für die Anzeigeeigenschaft für die ungeordnete Liste"”. Am Ende werden CSS -Eigenschaften angewendet, um die HTML -Elemente zu stylen, die sich im Inneren befinden" Schild. Dieser Artikel hat die Verwendung von Flexbox zum Erstellen einer Navigationsleiste erläutert.