elenat82
9/26/2015 - 4:01 PM
esempio layout statico.html
<!doctype html>
<html>
<head>
<title>Layout statico</title>
<link href="reset.css" rel="stylesheet" type="text/css" >
<link href="layout-statico.css" rel="stylesheet" type="text/css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<h1>ESEMPIO LAYOUT STATICO</h1>
</header>
<nav>
<ul>
<li> <a href="#" title="Primo link del menu">Primo link</a>
<ul>
<li> <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li> <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Secondo link del menu">Secondo link</a>
<ul>
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li> <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
<li> <a href="#" title="Terzo link">Terzo link</a>
<ul >
<li > <a href="#" title="Primo link del sottomenu">Primo link del sottomenu</a> </li>
<li > <a href="#" title="Secondo link del sottomenu">Secondo link del sottomenu</a> </li>
<li > <a href="#" title="Terzo link del sottomenu">Terzo link del sottomenu</a> </li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<h1>TITOLO DEL PRIMO ARTICOLO</h1>
<p> <img src="immagine1.png" width="150" height="150" alt="immagine 1" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL SECONDO ARTICOLO</h1>
<p> <img src="immagine2.png" width="150" height="150" alt="immagine 2" style="float: left;">Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</article>
<article>
<h1>TITOLO DEL TERZO ARTICOLO</h1>
<p><img src="immagine3.png" width="150" height="150" alt="immagine 3" style="float: left;"> Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
<article>
<h1>TITOLO DEL QUARTO ARTICOLO</h1>
<p><img src="immagine4.png" width="150" height="150" alt="immagine 4" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
</article>
<article>
<h1>TITOLO DEL QUINTO ARTICOLO</h1>
<p><img src="immagine5.png" width="150" height="150" alt="immagine 5" style="float: left;"> Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;. </p>
</article>
<article>
<h1>TITOLO DEL SESTO ARTICOLO</h1>
<p> <img src="immagine6.png" width="150" height="150" alt="immagine 6" style="float: left;">Etiam vitae nisl vel nunc consectetur sodales nec ut magna. Praesent sed sapien ut leo varius malesuada. Ut quis ornare diam. In tincidunt placerat tellus, varius pretium est eleifend et. Mauris in elit nec magna blandit blandit. Pellentesque tincidunt nisl non commodo finibus. Cras hendrerit facilisis blandit. </p>
</article>
</section>
<aside>
<h2>TITOLO DELL'ASIDE</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ipsum sem, egestas id iaculis eget, finibus eu justo. Proin quis faucibus ex. In quis varius neque. Aenean porta purus ac mi finibus mollis. Maecenas eleifend lectus a libero rutrum, ac ornare dui commodo. Donec aliquam, leo sed finibus aliquam, nibh odio egestas augue, sit amet pellentesque dolor arcu in risus.</p>
<p>Vestibulum elementum leo interdum, hendrerit tortor quis, luctus diam. Mauris ex neque, malesuada in faucibus nec, malesuada non dolor. Ut ante ex, tincidunt id tincidunt sed, ultricies id velit. Pellentesque urna mi, venenatis eu elit nec, rutrum pretium tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
</aside>
<footer>
<div>
<h3>SITEMAP</h3>
<ul>
<li><a href="#">Primo link</a></li>
<li><a href="#">Secondo link</a></li>
<li><a href="#">Terzo link</a></li>
<li><a href="#">Quarto link</a></li>
<li><a href="#">Quinto link</a></li>
</ul>
</div>
<div>
<h3>SOCIAL</h3>
<p>Seguici su <a href="#">Facebook</a></p>
<p>Seguici su <a href="#">Twitter</a></p>
<p>Seguici su <a href="#">Instagram</a></p>
</div>
<div>
<h3>CONTATTI</h3>
<p>Mario Rossi</p>
<p>via Roma 1</p>
<p>10100 Torino</p>
<small>P. IVA 00000000000</small> </div>
</footer>
</body>
</html>