Als we een navigatiebalk in HTML willen maken, moeten we de onderstaande stappen volgen. Met behulp van deze stappen kunnen we eenvoudig de navigatiebalk maken.
Stap 1: Ten eerste moeten we de HTML-code in een willekeurige teksteditor typen of het bestaande HTML-bestand openen in de teksteditor waarin we een navigatiebalk willen maken.
Make a Navigation Bar
Stap 2: Nu moeten we de tag definiëren in de tag waar we de balk willen maken.
You are at JavaTpoint Site.....
Stap 3: Daarna moeten we de definitie definiëren
- tag , die wordt gebruikt om de ongeordende lijst weer te geven. En dan moeten we de lijstitems in de
- label. We moeten de items definiëren die we in de navigatiebalk willen weergeven.
<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.....
Stap 4: Daarna moeten we de cursor net na het sluiten van de title-tag plaatsen. En dan moeten we de tag definiëren. Stap 4: Daarna moeten we de cursor net na het sluiten van de title-tag plaatsen. En dan moeten we de tag definiëren.
Make a Navigation Bar
Stap 5: Nu moeten we verschillende id-attributen specificeren die worden gebruikt om de positie en kleur van de navigatiebalk in te stellen. We moeten dus de volgende code in de head-tag gebruiken. We kunnen ook de waarde van eigendommen wijzigen volgens onze vereisten.
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; } Stap 6: Daarna moeten we de tag net vóór de openingstag typen. En we moeten ook deze tag sluiten. En ten slotte moeten we het HTML-bestand opslaan en het bestand vervolgens in de browser uitvoeren.
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..... Test het nu De uitvoer van bovenstaande HTML-code wordt weergegeven in de volgende schermafbeelding:
