Si volem fer una barra de navegació en HTML, hem de seguir els passos que es donen a continuació. Amb aquests passos, podem crear fàcilment la barra de navegació.
Pas 1: En primer lloc, hem d'escriure el codi HTML en qualsevol editor de text o obrir el fitxer HTML existent a l'editor de text en el qual volem fer una barra de navegació.
Make a Navigation Bar
Pas 2: Ara, hem de definir l'etiqueta a l'etiqueta on volem fer la barra.
You are at JavaTpoint Site.....
Pas 3: Després d'això, hem de definir el
- tag , que s'utilitza per mostrar la llista no ordenada. I, a continuació, hem de definir els elements de la llista al fitxer
- etiqueta. Hem de definir aquells elements que volem mostrar a la barra de navegació.
<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.....
Pas 4: Després d'això, hem de col·locar el cursor just després de tancar l'etiqueta de títol. I després, hem de definir l'etiqueta. Pas 4: Després d'aleshores, hem de col·locar el cursor en el just després de tancar l'etiqueta de títol. I després, hem de definir l'etiqueta.
Make a Navigation Bar
Pas 5: Ara, hem d'especificar diferents atributs d'identificació que s'utilitzen per establir la posició, el color de la barra de navegació. Per tant, hem d'utilitzar el codi següent a l'etiqueta head. També podem canviar el valor de les propietats segons els nostres requisits.
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; } Pas 6: Després d'això, hem d'escriure l'etiqueta just abans de l'etiqueta d'obertura. I també hem de tancar aquesta etiqueta. I, finalment, hem de desar el fitxer Html i després executar-lo al navegador.
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..... Prova-ho ara La sortida del codi HTML anterior es mostra a la captura de pantalla següent:
