|
Alcuni esempi in XHTML con Style.
A chi non piacerebbe avere dei contenitori con bordi smussati come questi?
Questo il codice CSS per ottenerlo:
/* 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.
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·