logo

Come realizzare una barra di navigazione in Html

Se vogliamo creare una barra di navigazione in Html, dobbiamo seguire i passaggi indicati di seguito. Utilizzando questi passaggi, possiamo facilmente creare la barra di navigazione.

ordinamento delle bolle Java

Passo 1: Per prima cosa dobbiamo digitare il codice Html in un qualsiasi editor di testo o aprire il file Html esistente nell'editor di testo in cui vogliamo creare una barra di navigazione.

 Make a Navigation Bar 

Passo 2: Ora dobbiamo definire il tag nel tag in cui vogliamo creare la barra.

 You are at JavaTpoint Site..... 

Passaggio 3: Dopodiché dobbiamo definire il

    tag , che viene utilizzato per mostrare l'elenco non ordinato. E poi dobbiamo definire gli elementi dell'elenco nel file
  • etichetta. Dobbiamo definire gli elementi che vogliamo mostrare nella barra di navigazione.

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

Passaggio 4: Successivamente, dobbiamo posizionare il cursore subito dopo la chiusura del tag del titolo. E poi, dobbiamo definire il tag . Passaggio 4: Successivamente, dobbiamo posizionare il cursore subito dopo la chiusura del tag del titolo. E poi, dobbiamo definire il tag.

 Make a Navigation Bar 

Passaggio 5: Ora dobbiamo specificare diversi attributi id utilizzati per impostare la posizione e il colore della barra di navigazione. Quindi, dobbiamo usare il seguente codice nel tag head. Possiamo anche modificare il valore degli immobili in base alle nostre esigenze.

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

Passaggio 6: Successivamente, dobbiamo digitare il tag subito prima del tag di apertura. E dobbiamo chiudere anche questo tag. E, infine, dobbiamo salvare il file Html e quindi eseguire il file nel 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..... 
Provalo adesso

L'output del codice HTML sopra è mostrato nella seguente schermata:

ordinamento della selezione in Java
Come realizzare una barra di navigazione in Html