Dacă vrem să facem o bară de navigare în Html, atunci trebuie să urmam pașii care sunt dați mai jos. Utilizând acești pași, putem crea cu ușurință bara de navigare.

Pasul 1: În primul rând, trebuie să introducem codul Html în orice editor de text sau să deschidem fișierul Html existent în editorul de text în care dorim să facem o Bară de navigare.

 Make a Navigation Bar 

Pasul 2: Acum, trebuie să definim eticheta în eticheta în care vrem să facem bara.

 You are at JavaTpoint Site..... 

Pasul 3: După aceea, trebuie să definim

tag , care este folosit pentru a afișa lista neordonată. Și, apoi, trebuie să definim elementele din listă în
• etichetă. Trebuie să definim acele elemente pe care dorim să le arătăm în bara de navigare.

sortare bule java

 <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..... 

Pasul 4: După aceea, trebuie să plasăm cursorul în imediat după închiderea etichetei de titlu. Și apoi, trebuie să definim eticheta. Pasul 4: După aceea, trebuie să plasăm cursorul în imediat după închiderea etichetei de titlu. Și apoi, trebuie să definim eticheta.

 Make a Navigation Bar 

Pasul 5: Acum, trebuie să specificăm diferite atribute de id care sunt folosite pentru a seta poziția, culoarea barei de navigare. Deci, trebuie să folosim următorul cod în eticheta head. De asemenea, putem modifica valoarea proprietăților în funcție de cerințele noastre.

 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; } 

Pasul 6: După aceea, trebuie să introducem eticheta chiar înainte de eticheta de deschidere. Și trebuie să închidem și această etichetă. Și, în cele din urmă, trebuie să salvăm fișierul Html și apoi să rulăm fișierul în browser.

 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..... 

Ieșirea codului HTML de mai sus este afișată în următoarea captură de ecran: