Če želimo narediti navigacijsko vrstico v Html, potem moramo slediti korakom, ki so navedeni spodaj. S temi koraki lahko preprosto ustvarimo navigacijsko vrstico.
Korak 1: Najprej moramo v kateri koli urejevalnik besedil vnesti kodo Html ali v urejevalniku besedil odpreti obstoječo datoteko Html, v kateri želimo narediti navigacijsko vrstico.
Make a Navigation Bar
2. korak: Zdaj moramo določiti oznako v oznaki, kjer želimo narediti vrstico.
You are at JavaTpoint Site.....
3. korak: Nato moramo definirati
- , ki se uporablja za prikaz neurejenega seznama. In potem moramo definirati elemente seznama v
- oznaka. Določiti moramo elemente, ki jih želimo prikazati v navigacijski vrstici.
<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.....
4. korak: Nato moramo kazalec postaviti tik za zaključkom naslovne oznake. In potem moramo definirati oznako. 4. korak: Po tem moramo postaviti kazalec tik za zaprtjem naslovne oznake. In potem moramo definirati oznako.
Make a Navigation Bar
5. korak: Zdaj moramo določiti različne atribute id, ki se uporabljajo za nastavitev položaja in barve navigacijske vrstice. Torej, v oznaki head moramo uporabiti naslednjo kodo. Prav tako lahko spremenimo vrednost nepremičnin glede na naše zahteve.
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; } 6. korak: Nato moramo oznako vnesti tik pred začetno oznako. In to oznako moramo tudi zapreti. In končno moramo shraniti datoteko Html in jo nato zagnati v brskalniku.
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..... Preizkusite zdaj Rezultat zgornje kode Html je prikazan na naslednjem posnetku zaslona:
