Progettazione e realizzazione di siti web

I file integrali delle esercitazioni:

• Il mio sito (Archivio ZIP)

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi

Da una semplice struttura di una lista non ordinata è possibile creare barre di navigazione stilisticamente eleganti e complesse. L’aggiunta di id semantici agli elementi della lista e al corpo della pagina permette inoltre di attivare, grazie ai selettori discendenti, una segnaletica visuale tu sei qui utile a orientare il visitatore nella sua navigazione.

La struttura

<div id="navigazione">
<h2>Navigazione</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="chi-siamo.html">Chi siamo</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>

Lo stile per una barra verticale

div#navigazione h2 {  
display: none;  
}
div#navigazione ul {  
list-style-type: none;  
}
div#navigazione a {  
padding: 10px 0 10px 35px;  
display: block;  
border-bottom: 1px solid #c30;  
text-decoration: none;  
color: #c30;  
background: white;  
}
div#navigazione a:hover {  
color: white;  
background: #c30;
}

Lo stile per una barra orizzontale

div#navigazione h2 {  
display: none;  
}
div#navigazione ul {  
list-style-type: none;  
}
div#navigazione li {
float: left;
}
div#navigazione a {
line-height: 1.6em;
padding: 0 65px 0 35px;
display: block;
border-right: 1px solid #c30;
text-decoration: none;
color: #c30;
background: white;}
div#navigazione a:hover {
color: white;
background: #c30;
}

Lo stile per l’effetto tu sei qui

body#home li#nav-home a {  
color: black;  
background-color: #c50;
}

Pubblicato da Paolo Sordi e archiviato in Realizzazione
I commenti sono chiusi