Primi passi in XHTML e CSS di Web-Link.it Esempi

/* CONTENITORI DEI BORDI E DEL CONTENUTO DEL BOX */

div.BORDI {width: 120px;}

div.CONTENUTO{background-color: #b1d6a7;
color: #000000;
width: 110px;
padding: 5px;}

/* CREAZIONE DEGLI ANGOLI SMUSSATI */

span.TOP, span.BOTTOM{display: Block;
background-color: #FFFFFF;}

span.TOP span, span.BOTTOM span{display: Block;
overflow: Hidden;
background-color: #b1d6a7;
height: 1px;}

span.RIGA1{margin: 0 5px;}

span.RIGA2{margin: 0 3px;}

span.RIGA3{margin: 0 2px;}

span.TOP span.RIGA4, span.BOTTOM span.RIGA4{margin: 0 1px;
height: 2px;}

Questo il codice HTML per ottenerlo:

<div class="BORDI">
<span class="TOP">
<span class="RIGA1"></span>
<span class="RIGA2"></span>
<span class="RIGA3"></span>
<span class="RIGA4"></span>
</span>
</div>

<div class="CONTENUTO">
<b>XHTML con Style</b><br /><br /> Corso gratuito e completo per principianti e non<br /><br /> disponibile su http://www.web-link.it
</div>

<div class="BORDI">
<span class="BOTTOM">
<span class="RIGA4"></span>
<span class="RIGA3"></span>
<span class="RIGA2"></span>
<span class="RIGA1"></span>
</span>
</div>

O questo menù di navigazione:

per i quali poter scegliere il colore preferito:

Questo il codice CSS per ottenerlo:

#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;}

#navlist li {
list-style: none;
margin: 0;
display: inline;}

#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #b1d6a7;
text-decoration: none;}

#navlist li a:link { color: #448;}

#navlist li a:visited { color: #667;}

#navlist li a:hover {
color: #000;
background: #009900;
border-color: #227;}

#navlist li a#current {
background: white;
border-bottom: 1px solid white;}

Questo il codice HTML per ottenerlo:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">pagina uno</a></li>
<li><a href="#">pagina due</a></li>
<li><a href="#">pagina tre</a></li>
<li><a href="#">pagina quattro</a></li>
<li><a href="#">pagina cinque</a></li>
</ul>
</div>

Per questo menù trovate maggiori spiegazioni su questo link

_{Entrambi gli script non sono di mia invenzione ma frutto anonimo della rete}.

Andrea Bianchi

Sito di riferimento: www.Web-Link.it
Forum di riferimento: www.ilmioforum.com

Se ritieni utile questa guida, considera la possibilità di effettuare una donazione (il cui importo è a tua completa discrezione) tramite PayPal. Grazie.

Potete fare domande e discutere l'argomento sul Forum gratuito di supporto.