Stilefoglio4

<!DOCTYPE HTML>
<html lang="it"> 
<html>
<head>
<title>Introduzione CSS</title> 
<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-size:20px;
margin-left:40px;
}
h3{
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"> 
<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> 
<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>Stilefoglio4.</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">NoStilefoglio,</a></li>
</ul>
<div style="clear:both;"></div> 
<div id="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> 
</div> 

</body>
</html>

Stilefoglio4

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Stilefoglio4