Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



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


XHTML con Style

Corso gratuito e completo per principianti e non

disponibile su
web-link.it


XHTML con Style

Corso gratuito e completo per principianti e non

disponibile su
web-link.it





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