Stilefoglio1
4
Click here to load reader
-
Upload
massimiliano-sartori -
Category
Internet
-
view
23 -
download
0
Transcript of Stilefoglio1
<!DOCTYPE HTML><html lang="it"> <!--dichiariamo il linguaggio del documento--><html><head><title>Introduzione CSS</title> <!-- testo scheda --><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:green; padding:5px; width:890px; margin:0 auto; height:60px; border:1px; border-radius:5px;}#nav{ margin:0; padding:0; list-style:none;}#nav li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:10px;}h1{ font-family: verdana; font-size:20px; background-color:green; padding:5px; width:880px; margin:0 auto; border:1px; color:white;}#pagina #col-sx{
width:200px;padding:0px;margin:10px 30px 0px 30px;vertical-align:top;
}#pagina #col-sx ul{
margin:0px;padding:0px;list-style-type:none;
}#pagina #col-sx ul li{
margin-bottom:5px;background-color:green;color:#fff;font-weight:bold;text-transform:uppercase;border-radius:5px;
}#pagina #col-sx ul li#bottone-selezionato{
height:20px;padding:10px;
}#pagina #col-sx ul li a{
display:block;height:20px;padding:10px;text-decoration:none;background-color:lightgrey;color:#000;border-radius:5px;border:1px solid grey;
}#pagina #col-sx ul li a:hover{
background-color:white;border:1px solid grey;
}#pagina #col-dx{
width:400px;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-sx,#pagina #col-dx{
display:inline-block;}
h2{ font-family: verdana; font-size:20px; padding:0px;}h3{ font-family: verdana; font-size:20px;}#barra{ background-color:#3399ff; padding:5px; width:890px; margin:0 auto; height:130px; border:1px; border-radius:5px; color:white;}#centro{ background-color:lightgrey; padding:5px; width:890px; margin:10px auto; height:110px; border-radius:5px;}pre{background-color:green; padding:5px;margin:0px auto;color:white;
}</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> <!-- testata --><div id="col-sx"><ul> <li id="bottone-selezionato">Stilefoglio 1</li> <li><a href="Stilefoglio2.html">Stilefoglio 2</a></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> <!-- col-sx --><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>Stilefoglio1</li> <li><a href="Stilefoglio2.html">Stilefoglio2</a></li> <li><a href="Stilefoglio3.html">Stilefoglio3</a></li> <li><a href="Stilefoglio4.html">Stilefoglio4</a></li> </ul> <div style="clear:both;"></div> <!-- reset flusso --><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> <!-- reset flusso --></div> <!-- col-dx --><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> <!-- fine barra --><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> <!-- fine centro --></div> <!-- fine pagina --><!-- <footer>Copyright Model Simple. Powered by SartoriMax 2016</footer> <!--
informazioni sul documento--></body></html>
