Wenn wir eine Navigationsleiste in HTML erstellen möchten, müssen wir die unten aufgeführten Schritte ausführen. Mit diesen Schritten können wir ganz einfach die Navigationsleiste erstellen.

Schritt 1: Zuerst müssen wir den HTML-Code in einen beliebigen Texteditor eingeben oder die vorhandene HTML-Datei in dem Texteditor öffnen, in dem wir eine Navigationsleiste erstellen möchten.

 Make a Navigation Bar 

Schritt 2: Jetzt müssen wir das Tag in dem Tag definieren, in dem wir die Leiste erstellen möchten.

 You are at JavaTpoint Site..... 

Schritt 3: Danach müssen wir das definieren

tag , das verwendet wird, um die ungeordnete Liste anzuzeigen. Und dann müssen wir die Listenelemente in definieren
• Etikett. Wir müssen die Elemente definieren, die wir in der Navigationsleiste anzeigen möchten.

 <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... 

Schritt 4: Danach müssen wir den Cursor direkt nach dem Schließen des Title-Tags platzieren. Und dann müssen wir das Tag definieren. Schritt 4: Danach müssen wir den Cursor direkt hinter dem Titel-Tag platzieren. Und dann müssen wir das Tag definieren.

 Make a Navigation Bar 

Schritt 5: Jetzt müssen wir verschiedene ID-Attribute angeben, die zum Festlegen der Position und Farbe der Navigationsleiste verwendet werden. Daher müssen wir den folgenden Code im Head-Tag verwenden. Wir können den Wert von Immobilien auch entsprechend unseren Anforderungen ändern.

 body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } 

Schritt 6: Danach müssen wir das Tag direkt vor dem öffnenden Tag eingeben. Und wir müssen dieses Tag auch schließen. Und schließlich müssen wir die HTML-Datei speichern und sie dann im Browser ausführen.

 Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... 

Die Ausgabe des obigen HTML-Codes wird im folgenden Screenshot angezeigt: