Quando si crea un sito Web, si hanno in genere un paio di opzioni per il posizionamento di un menu di navigazione. In alcuni casi, questo menu si trova nella parte superiore della pagina, e a volte è incluso come una barra laterale che corre verticalmente lungo il lato di una pagina. Quando si effettua una barra laterale in HTML, è necessario inserire la barra laterale come due sezioni nella pagina HTML. Una sezione è il codice CSS che rende funzionale barra laterale e l'altro è il codice HTML che dà la barra laterale la sua struttura.

Istruzioni

1

Accedere al server Web e aprire la pagina HTML in cui si vuole fare una barra laterale.

2

Fare clic sullo schermo tra il < body > e < / body > Tag e inserire il codice seguente:

< div id = "navigazione" >

Contenuto di < h2 > < / h2 >

< ul >

< li >< un href = "Introduzione & lt; /a > & lt; /li" > http://www.webpage1.com "> Introduzione & lt; / a > & lt; / li >

< li >< un href = "Blog & lt; /a > & lt; /li" > http://www.webpage2.com "> Blog & lt; / a > & lt; / li >

< li >< un href = "Informazioni su" > http://www.webpage3.com "> About Us < /a >< / li >

< li >< un href = "News & lt; /a > & lt; /li" > http://www.webpage4.com "> News & lt; / a > & lt; / li >

< li >< un href = "Contatto" > http://www.webpage5.com "> Scrivici < /a >< / li >

</UL >

< / div >

3

Sostituire gli URL di esempio e il testo che compaiono su ogni collegamento con gli URL e il testo che si desidera utilizzare sulla tua pagina.

4

Fare clic su solo dopo il tag < head > nella parte superiore della tua pagina e inserire il codice seguente:

< titolo >< / title >

< tipo di stile = "css" >

navigazione () {

Larghezza: 150px;

background-color: #000FFF;

colore: #FFFFFF;

float: left;

margin-left: 7px;

margine destro: 6px;

}

navigazione h2, {hr #navigation

visualizzare: blocco

padding: 5px 10px;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000FFF;

}

navigazione ul {

margin: 0px;

padding: 0px;

list-style: none;

}

navigazione li ul {

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000FFF;

}

navigazione ul li a {

padding: 8px;

display: block;

background-color: #000FFF;

colore: #FFFFFF;

Proprietà Text-decoration: none;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000FFF;

}

navigazione ul li a: hover {

background-color: #6495ED;

}

< / stile >

5

Sostituire i codici di colore se si desidera personalizzare la pagina (Vedi risorse).

6

Pubblicare la pagina.