Stilefoglio3

<!DOCTYPE HTML><html lang="it"> <html><head><title>Introduzione CSS</title> <style type="text/css">html, body{

margin:0px;padding:0px;

}body{ background-color:lightblue;}#pagina{ background-color:white; padding:5px; width:960px; margin:0 auto; border:1px;}#testata{ background-color:white; padding:5px; width:890px; margin:10px 0 10px 10px; height:60px; border:0px; border-radius:0px;}#nav{ margin:0; padding:0; list-style:none;}#nav li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:10px;}#nav li a{ color:black;}#nav li a:hover{ background:none; color:lightgreen;}#col-sx li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:10px;}h1{ font-family: verdana; font-size:20px; background-color:white; padding:5px; width:880px; margin:0 auto; border:1px; color:lightgreen;}#pagina #col-sx{

width:880px;padding:0px;margin:10px 30px 0px 20px;vertical-align:top;

}#pagina #col-sx ul{

margin:0px;padding:0px;list-style-type:none;

}#pagina #col-sx ul li{

margin-bottom:20px;background-color:black;color:#fff;font-weight:bold;text-transform:uppercase;border-radius:0px;

}#pagina #col-sx ul li#bottone-selezionato{

height:20px;padding:10px;width:200px;text-align:center;

}#pagina #col-sx ul li#bottone-selezionato:hover{

background-color:lightgrey;text-align:center;

}#pagina #col-sx ul li a{

display:block;height:20px;padding:10px;text-decoration:none;text-align:center;background-color:#404040; /* grigio scuro */color:#fff;border-radius:0px;border:1px solid greyblack;margin:0px 0px 0px 0px;width:200px;

}#pagina #col-sx ul li a:hover{

background-color:lightgrey;border:0px solid grey;

}#pagina #col-dx{

width:880px;padding:20px;

}#pagina #col-dx h2{

margin:0px 0px 12px 0px;font-size:20px;font-weight:bold;font-style:normal;

}#pagina #col-dx p{

margin:0px 0px 6px 0px;line-height:30px;letter-spacing:3px;

}#pagina #col-dx,#pagina #col-sx{

display:inline-block;}h2{ font-family: verdana; font-size:20px; padding:0px; color:lightgreen;}h3{ font-family: verdana; font-size:20px;

color:lightgreen;}h4{ font-family: verdana; font-size:20px; color:lightgreen;}#barra{ background-color:#ebebe0; padding:5px; width:890px; margin:0 auto; height:130px; border:1px solid lightgrey; border-radius:0px; margin-left:20px;}#centro{ background-color:white; padding:5px; width:890px; margin:0 auto; height:110px; border-radius:0px; margin-left:20px;}pre{background-color:white; padding:5px;margin:0px auto;color:black;}</style></head><body><div id="pagina"><div id="testata"><h1>Benvenuti alla mia pagina</h1><pre>Usa il menu per selezionare differenti stili di fogli</pre></div> <div id="col-sx"><ul> <li><a href="Stilefoglio1.html">Stilefoglio 1</a></li> <li><a href="Stilefoglio2.html">Stilefoglio 2</a></li> <li id="bottone-selezionato">Stilefoglio 3</li> <li><a href="Stilefoglio4.html">Stilefoglio 4</a></li> <li><a href="nostilefoglio.html">No Stilefoglio</a></li> </ul></div> <div id="col-dx"><h2>Stessa pagina differenti stili di fogli</h2><p>Questa e' la dimostrazione di come differenti stile di fogli possono cambiare la visione della tua pagina HTML.<br>Tu puoi cambiare la visione di questa pagina selezionando diversi stili di fogli nel menu,oppure selezionando questi seguenti links:<br></p><ul id="nav"> <li><a href="Stilefoglio1.html">Stilefoglio1</a></li> <li><a href="Stilefoglio2.html">Stilefoglio2</a></li> <li>Stilefoglio3</li> <li><a href="Stilefoglio4.html">Stilefoglio4</a></li> </ul> <div style="clear:both;"></div> <h3>No stili</h3><p>Questa pagina usa elementi DIV per un gruppo differente di sezioni della pagina HTML<br>

Selezionare qui per vedere come la pagina si mostra con nessuno stile<br></p><ul id="nav"> <li><a href="nostilefoglio.html">No Stilefoglio</a></li> </ul> <div style="clear:both;"></div> </div> <div id="barra"><h4>Barra laterale</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore<br>magna aliquam erat volutpat.</p></div> <div id="centro"<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore<br>magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut<br>aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,<br>vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril<br>delenit augue duis dolore te feugait nulla facilisi.</p> </div> </div> </body></html>

Internet

Stilefoglio3