Come fare una barra di navigazione in HTML?
La barra di navigazione è il componente principale di qualsiasi pagina Web/sito Web. Una barra di navigazione potrebbe essere nella direzione orizzontale o verticale. Tenendo conto dell'importanza delle barre di navigazione, questo post delinea diversi metodi per creare una barra di navigazione in HTML. I possibili risultati di questo blog sono:
- Come creare una barra di navigazione orizzontale in HTML?
- Come creare una barra di navigazione verticale in HTML?
Metodo 1: come creare una barra di navigazione orizzontale in HTML?
Il documento HTML è la combinazione di centinaia di tag. Ogni tag si riferisce ad alcune funzionalità specifiche. Inoltre, puoi combinare più elementi per creare un design personalizzato. Una barra di navigazione può essere creata con l'aiuto di
- E
- tag. Questa sezione fornisce una guida dettagliata per creare barre orizzontali in HTML.
Di seguito viene visualizzato il codice HTML per creare una barra di navigazione orizzontale.
Html
Primo documento
In questo codice:
- Abbiamo creato un .
- All'interno, un elenco viene creato utilizzando
- etichetta.
- Per aggiungere gli elementi in
- tag, abbiamo inserito gli elementi dell'elenco utilizzando
- etichetta.
- Infine, all'interno del tag inseriamo i collegamenti ad altre pagine HTML usando il tag.
Per una migliore presentazione, il seguente codice CSS viene applicato su HTML.
CSS
ul
stile elenco: nessuno;
li a
DECORAZIONE DEL TESTO: Nessuno;
blocco di visualizzazione;
Float: a sinistra;
imbottitura: 10px 15px;
Font-size: 20px;
Background-color: LightGray;
colore nero;
Font-Family: Georgia, "Times New Roman", Times, Serif;
li a: hover
Background-color: Lightsalmon;
colore bianco;
Nel codice sopra:
- La proprietà di stile dell'elenco non è impostata su nessuno.
- Inoltre, varie proprietà CSS tra cui (decorazione del testo, display, galleggiante ecc.) vengono applicati negli elementi dell'elenco.
- Un effetto hover viene aggiunto anche al etichetta.
Produzione
L'output mostra che abbiamo creato correttamente una barra di navigazione orizzontale utilizzando HTML e CSS.
Metodo 2: come creare una barra di navigazione verticale in HTML?
Gli ingredienti primari (
- ,
- ) sono gli stessi per le barre verticali e orizzontali. Pertanto, una barra verticale è facile da creare. In questo esempio, abbiamo esercitato il seguente codice per creare una barra di navigazione in HTML:
Html
Primo documento
In questo codice:
- Abbiamo creato un elenco usando il
- etichetta.
- Dentro il
- tag, abbiamo inserito gli elementi dell'elenco utilizzando il
- etichetta.
- Quindi, abbiamo inserito i collegamenti ad altre pagine HTML usando il tag.
Per una migliore estetica della barra di navigazione, abbiamo utilizzato il seguente codice CSS e inserito in un file CSS esterno:
CSS
ul
stile elenco: nessuno;
li a
DECORAZIONE DEL TESTO: Nessuno;
blocco di visualizzazione;
larghezza: 180px;
imbottitura: 10px 15px;
Font-size: 20px;
Background-color: LightGray;
colore nero;
Font-Family: Georgia, "Times New Roman", Times, Serif;
li a: hover
Background-color: Lightsalmon;
colore bianco;
Nel codice CSS sopra:
- Lo stile dell'elenco non è impostato su nessuno.
- Diversi stili vengono applicati negli elementi dell'elenco.
- Infine, l'effetto hover viene applicato anche sugli elementi dell'elenco.
Produzione
L'output mostra che abbiamo creato correttamente una barra di navigazione verticale.
Ecco qui! Hai imparato a creare una barra di navigazione orizzontale e verticale in HTML.
Conclusione
In HTML, possiamo fare una barra di navigazione creando un semplice elenco utilizzando
- ,
- e tag. Una barra di navigazione può essere verticale o orizzontale. Inoltre, puoi aggiungere vari stili applicando il CSS. Questo post ha dimostrato i metodi per creare barre di navigazione in HTML. Con l'aiuto di una barra di navigazione, si può navigare verso le varie pagine del sito Web.
- Abbiamo creato un elenco usando il