So erstellen Sie eine Navigationsleiste in HTML?

Im modernen Computer kann eine Webseite Links enthalten, die zu mehreren anderen Seiten umleiten. Normalerweise werden diese Links an einer bestimmten Position auf der Webseite platziert. Das spezifische Stück, das diese Links enthält, wird als Navigationsleiste bezeichnet.

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

  
  
  
  
  
  
  
  
  
  
  
  • Heim
  
  
  • Über uns
  
  
  • Kontaktiere uns
  
  
  • Galerie
  
  
  
  
  
  

  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

        
        
        
        
        
        
        
        
        
        
        • Heim
        
        
        • Über uns
        
        
        • Kontaktiere uns
        
        
        • Galerie
        
        
        
        
        

        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.