Hvis vi vil lave en navigationslinje i HTML, så skal vi følge trinene, som er givet nedenfor. Ved at bruge disse trin kan vi nemt oprette navigationslinjen.
Trin 1: For det første skal vi skrive HTML-koden i en hvilken som helst teksteditor eller åbne den eksisterende HTML-fil i teksteditoren, hvor vi vil lave en navigationslinje.
Make a Navigation Bar
Trin 2: Nu skal vi definere tagget i tagget, hvor vi vil lave baren.
sorteret tuple python
You are at JavaTpoint Site.....
Trin 3: Derefter skal vi definere
- tag , som bruges til at vise den uordnede liste. Og så skal vi definere listepunkterne i
- tag. Vi er nødt til at definere de elementer, som vi ønsker at vise i navigationslinjen.
<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.....
Trin 4: Derefter skal vi placere markøren i lige efter lukningen af titel-tagget. Og så skal vi definere tagget. Trin 4: Derefter skal vi placere markøren i lige efter lukningen af titel-tagget. Og så skal vi definere tagget.
Make a Navigation Bar
Trin 5: Nu skal vi angive forskellige id-attributter, som bruges til at indstille positionen, farven på navigationslinjen. Så vi skal bruge følgende kode i head-tagget. Vi kan også ændre værdien af ejendomme i henhold til vores krav.
Download video fra youtube vlc
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; } Trin 6: Derefter skal vi skrive tagget lige før det indledende tag. Og vi skal også lukke dette tag. Og til sidst skal vi gemme HTML-filen og derefter køre filen i browseren.
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 det nu Outputtet af ovenstående HTML-kode er vist i følgende skærmbillede:
