Hvis vi vil lage en navigasjonslinje i HTML, må vi følge trinnene som er gitt nedenfor. Ved å bruke disse trinnene kan vi enkelt lage navigasjonslinjen.
Trinn 1: For det første må vi skrive inn HTML-koden i et hvilket som helst tekstredigeringsprogram eller åpne den eksisterende HTML-filen i tekstredigeringsprogrammet der vi vil lage en navigasjonslinje.
Make a Navigation Bar
Steg 2: Nå må vi definere taggen i taggen hvor vi vil lage baren.
sortert tuppelpyton
You are at JavaTpoint Site.....
Trinn 3: Etter det må vi definere
- tag , som brukes til å vise den uordnede listen. Og så må vi definere listeelementene i
- stikkord. Vi må definere elementene som vi vil vise i navigasjonslinjen.
<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.....
Trinn 4: Deretter må vi plassere markøren i rett etter lukkingen av titteltaggen. Og så må vi definere taggen . Trinn 4: Deretter må vi plassere markøren i rett etter lukkingen av titteltaggen. Og så må vi definere taggen.
Make a Navigation Bar
Trinn 5: Nå må vi spesifisere forskjellige id-attributter som brukes til å angi posisjonen, fargen på navigasjonslinjen. Så vi må bruke følgende kode i head-taggen. Vi kan også endre verdien på eiendommer i henhold til våre krav.
Last ned 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; } Trinn 6: Etter det må vi skrive inn taggen rett før åpningstaggen. Og vi må også lukke denne taggen. Og til slutt må vi lagre HTML-filen og deretter kjøre filen i nettleseren .
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 nå Utdataene fra HTML-koden ovenfor vises i følgende skjermbilde:
