Stilefoglio4

3
<!DOCTYPE HTML> <html lang="it"> <!--dichiariamo il linguaggio del documento--> <html> <head> <title>Introduzione CSS</title> <!-- testo scheda --> <style type="text/css"> body{ background-color:lightblue; } #pagina{ background-color:black; padding:5px; width:900px; margin:0 auto; color:green; } #nav{ margin:0; padding:0; list-style:none; } #nav li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:-20px; margin-left:40px; } #nav li a{ color:white; } #nav li a:hover{ color:green; } h1{ font-family: verdana; font-size:20px; padding:0px; margin-left:40px; color:green; } .a li a{ list-style-type:none; margin-top:20px; color:green; } .a li{ color:white; margin-bottom:10px; margin-left:20px; } .a li a:hover{ list-style-type:none; color:white; } h2{ font-family: verdana; font-size:20px; margin-left:40px; } h3{ font-family: verdana; font-size:20px; margin-left:40px; } h4{ margin-top:10px; }

Transcript of Stilefoglio4

<!DOCTYPE HTML><html lang="it"> <!--dichiariamo il linguaggio del documento--><html><head><title>Introduzione CSS</title> <!-- testo scheda --><style type="text/css">body{ background-color:lightblue;}#pagina{ background-color:black; padding:5px; width:900px; margin:0 auto; color:green;}#nav{ margin:0; padding:0; list-style:none;}#nav li{ float:left; /* da vert a orizz */ margin-left:0px; margin-right:-20px; margin-left:40px;}#nav li a{ color:white;}#nav li a:hover{ color:green;}h1{ font-family: verdana; font-size:20px; padding:0px; margin-left:40px; color:green;}.a li a{ list-style-type:none; margin-top:20px; color:green;}.a li{ color:white;

margin-bottom:10px;margin-left:20px;

}.a li a:hover{ list-style-type:none; color:white;}h2{ font-family: verdana; font-size:20px; margin-left:40px;}h3{ font-family: verdana; font-size:20px; margin-left:40px;}h4{margin-top:10px;}

p{margin-left:40px;}#bl{background-color:black;border-style:solid;border-color:white;border-width:1px;border-radius:5px;color:white;padding:10px;margin:-160px 30px 30px 550px;width:300px;height:150px;}#bl p{margin:0px;}#up{background-color:black;border-style:solid;border-color:white;border-width:1px;border-radius:5px;color:white;padding:0px;margin:10px 30px;}#up p{margin-left:10px;}pre{padding:0px;margin-left:40px;margin-bottom:50px;color:green;}</style></head><body><div id="pagina"><h1>Benvenuti alla mia pagina</h1><pre>Usa il menu per selezionare differenti stili di fogli</pre><ul class="a"> <li><a href="stilefoglio1.html">Stilefoglio 1</a></li> <li><a href="stilefoglio2.html">Stilefoglio 2</a></li> <li><a href="Stilefoglio3.html">Stilefoglio 3</a></li> <li>Stilefoglio 4</li> <li><a href="Nostilefoglio.html">No Stilefoglio</a></li> </ul><div id="bl"> <!-- inizio bl --><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 bl--><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><a href="Stilefoglio3.html">Stilefoglio3,</a></li> <li>Stilefoglio4.</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">NoStilefoglio,</a></li> </ul> <div style="clear:both;"></div> <!-- reset flusso --><div id="up"> <!-- inizio up --><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 up --></div> <!-- fine pagina --><!-- <footer> Copyright Model Simple. Powered by SartoriMax 2016 </footer> <!--informazioni sul documento--></body></html>