Come fare un CSS Navbar

March 12

Una barra di navigazione (barra di navigazione), o il menu, può essere posizionato in orizzontale nella parte superiore o inferiore di una pagina Web. Può anche essere posizionato verticalmente lungo entrambi i lati della pagina. Il menu di navigazione è un elenco di link con stili aggiunti per rimuovere i proiettili e la numerazione e posizionare i collegamenti correttamente sulla pagina. È possibile creare un file CSS esterno che contiene gli stili barra di navigazione in modo che la barra di navigazione avrà lo stesso aspetto in ogni pagina Web attraverso il vostro intero sito web.

istruzione

CSS porzione (orizzontale)

1 Aprire un documento di testo vuoto.

2 Digitare le righe seguenti:

ul

{

list-style-type: none;

margin: 0;

padding: 0;

}

Questo eliminerà i elenchi puntati o numerati dalla lista HTML.

3 Per forzare gli elementi della lista per allineare in orizzontale, piuttosto che verticale, digitare le seguenti righe:

Li

{

display: inline;

}

In alternativa, si può galleggiare le voci di elenco, sostituendo "display: inline;" con "float: left;" e aggiungendo le seguenti righe al file:

un

{

blocco di visualizzazione;

width: 50px;

}

4 Salvare il file con l'estensione "css" del file (ad esempio, "navbar.css").

CSS porzione (verticale)

5 Aprire un documento di testo vuoto.

6 Digitare le righe seguenti:

ul

{

list-style-type: none;

margin: 0;

padding: 0;

}

Questo eliminerà i elenchi puntati o numerati dalla lista HTML.

7 Per rendere l'intera zona cliccabile collegamento e specificare la larghezza, digitare le seguenti righe:

un

{

blocco di visualizzazione;

width: 50px;

}

Gli elementi copriranno tutta la larghezza del blocco.

8 Salvare il file con l'estensione "css" del file (ad esempio, "navbar.css").

Porzione HTML

9 Aprire un documento di testo vuoto.

10 Per iniziare il documento HTML, TPE la linea:

<Html>

11 Per creare un collegamento al file CSS, digitare le righe:

<Head>

<Link rel = "stylesheet" type = "text / css" href = "navbar.css" />

</ Head>

12 Per creare il menu di navigazione, digitare le seguenti righe:

<Body>

<Ul>

<Li> <a href="example1.html"> collegamento 1 </a> </ li>

<Li> <a href="example2.html"> Link 2 </a> </ li>

<Li> <a href="example3.html"> Link 3 </a> </ li>

<Li> <a href="example4.html"> Link 4 </a> </ li>

</ Ul>

</ Body>

Sostituire "example1.html," "example2.html", "example3.html" e "example4.html" con gli URL per i link. Sostituire "Link 1," "Link 2," "Link 3" e "Link 4" con il testo che si desidera visibile nel menu di navigazione.

13 Salvare il file con l'estensione ".html".

14 Aprire il file in qualsiasi browser Web per visualizzare la barra di navigazione.