Jos haluamme tehdä navigointipalkin HTML-muodossa, meidän on noudatettava alla annettuja ohjeita. Näiden vaiheiden avulla voimme helposti luoda navigointipalkin.
Vaihe 1: Ensinnäkin meidän on kirjoitettava HTML-koodi mihin tahansa tekstieditoriin tai avattava olemassa oleva HTML-tiedosto tekstieditorissa, johon haluamme tehdä navigointipalkin.
Make a Navigation Bar
Vaihe 2: Nyt meidän on määritettävä tunniste tagissa, johon haluamme tehdä palkin.
You are at JavaTpoint Site.....
Vaihe 3: Sen jälkeen meidän on määriteltävä
- -tunniste , jota käytetään näyttämään järjestämätön luettelo. Ja sitten meidän on määritettävä luettelon kohteet
- tag. Meidän on määritettävä ne kohteet, jotka haluamme näyttää navigointipalkissa.
<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.....
Vaihe 4: Sen jälkeen meidän on asetettava kohdistin otsikkotunnisteen sulkemisen jälkeen. Ja sitten meidän on määritettävä tunniste . Vaihe 4: Sen jälkeen meidän on asetettava kohdistin heti otsikkotunnisteen sulkemisen jälkeen. Ja sitten meidän on määritettävä tunniste.
Make a Navigation Bar
Vaihe 5: Nyt meidän on määritettävä erilaiset id-attribuutit, joita käytetään navigointipalkin sijainnin ja värin asettamiseen. Joten meidän on käytettävä seuraavaa koodia head-tunnisteessa. Voimme myös muuttaa kiinteistöjen arvoa tarpeidemme mukaan.
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; } Vaihe 6: Tämän jälkeen meidän on kirjoitettava tagi juuri ennen avaustunnistetta. Ja meidän on myös suljettava tämä tagi. Ja viimeinkin meidän on tallennettava HTML-tiedosto ja suoritettava tiedosto sitten selaimessa.
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..... Testaa nyt Yllä olevan HTML-koodin tulos näkyy seuraavassa kuvakaappauksessa:
