Guida XHTML esempi in XHTML e CSS di Web-Link.it Esempi

Andrea Bianchi © www.web-link.it Guida XHTML con Style - Ver. 1.5.1

Ver. 0.1 - Anno 2005

Alcuni esempi in XHTML con Style.

A chi non piacerebbe avere dei contenitori con bordi smussati come questi? L'operazione è di una semplicità sorprendente, a patto che il vostro browser supporti i CSS3 e di conseguenza la proprietà border-radius.

XHTML con Style

Corso gratuito e completo per principianti e non

disponibile su
web-link.it

Questo il codice CSS per ottenerlo:

#bordo {
background-color:#ffff99;
padding: 5px 25px 5px 25px;
margin: 10px 15px 10px 15px;
width: 200px;
border-radius: 0px 0px 20px 20px;
}

Questo il codice HTML per ottenerlo:

<div id="bordo">XHTML con Style
Corso gratuito e completo per principianti e non
disponibile su
web-link.it</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

_{Il codice menù non è di mia invenzione ma frutto anonimo della rete}.

Andrea Bianchi

per stampare questa pagina