Stilefoglio2

<!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:red; padding:5px; width:890px; margin:0 auto; height:80px; border:1px; border-radius:0px; margin:0px 0px 0px 30px;}

#nav{ margin:0; padding:0; list-style:none;}#nav li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:10px; color:red;}#nav li a{ color:red;}#nav li a:hover{ background:none; color:red;}h1{ font-family: verdana; font-size:20px; background-color:red; padding:5px; width:860px; margin:5px 0px 0px 20px; border:1px; color:white;}

#pagina #col-sx{ width:600px;padding:20px;border-style:solid;

border-color:red;border-width: 0px 0px 0px 10px;margin:0px 0px 0px 30px;height:430px;

}#pagina #col-sx h2{

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

}#pagina #col-sx p{

margin:0px 0px 20px 0px;line-height:20px;letter-spacing:3px;

}

#pagina #col-dx{ width:180px;padding:13px;margin:0px 30px 0px 30px;vertical-align:top;border-style:solid;

border-color:red;border-width: 0px 10px 0px 0px;height:444px;

}#pagina #col-dx ul{

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

}#pagina #col-dx ul li{

margin-bottom:20px;background-color:white;color:red;font-weight:bold;text-transform:uppercase;border-radius:10px;

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

height:20px;padding:10px;border:1px solid red;border-radius:20px;text-align:center;

}#pagina #col-sx ul li a{ text-decoration:none;}#pagina #col-sx ul li a:hover{ text-decoration:underline;}#pagina #col-dx ul li a{

display:block;height:20px;padding:10px;text-decoration:none;text-align:center;background-color:red;color:#fff;border-radius:20px;border:1px solid grey;

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

background-color:white;border:1px solid red;color:red;

}

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

display:inline-block;}h2{ font-family: verdana; font-size:20px; padding:0px; color:red;}h3{ font-family: verdana; font-size:20px; margin:40px 0px 10px 0px; color:red;}h4{ margin:20px 0px 10px 20px;}#barra p{ margin:20px 0px 10px 20px;}#barra{ background-color:#ffcccc; padding:5px; width:870px; margin:0px auto; height:120px; border-radius:0px; color:red; border-style:solid; border-color:red; border-width: 0px 10px 0px 10px;}#centro{ background-color:red; padding:20px; width:860px; margin:0px 0px 10px 30px; height:90px; border-radius:0px; color:white;}#centro p{ margin:0px 0px 0px 10px;}pre{background-color:red; padding:5px;margin:0px auto;color:white;}</style></head><body><div id="pagina"><div id="testata"><h1>Usa il menu per selezionare differenti stili di fogli</h1><pre></pre></div> 

<div id="col-sx"> <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>Stilefoglio2</li> <li><a href="Stilefoglio3.html">Stilefoglio3</a></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="col-dx"> <ul> <li><a href="Stilefoglio1.html">Stilefoglio 1</a></li> <li id="bottone-selezionato">Stilefoglio 2</li> <li><a href="Stilefoglio3.html">Stilefoglio 3</a></li> <li><a href="Stilefoglio4.html">Stilefoglio 4</a></li> <li><a href="nostilefoglio.html">No Stilefoglio</a></li> </ul></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>

Stilefoglio2

Internet

Transcript of Stilefoglio2