Layout flusso standard

Contenuto alternativo per i browser che non leggono gli iframe.
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<style type="text/css">

body {
 width: 950px;
 font-family: Arial, Verdana, sans-serif;
 color: #665544;
 margin: auto;}
h1 {
 background-color: #efefef;
 margin: 20px 0 20px;
 padding: 15px;}
h2 {
 text-align: center;
 padding: 15px;}
h3 {text-align: center;
 padding: 15px;}
p {
 width: 950px;
 margin: 0px;
 }
hr {
 border: 0;
 width: 100%;
 color: #000000;
 background-color: #000000;
 height: 1px;
 }
#menu ul {
 padding: 0;
 margin: 0;
 z-index: 1000;
 }
#menu li {
 position: relative;
 float: left;
 width: 190px;
 text-align: center;
 list-style: none;
 }
#menu li a {
 background-color: #454545;
 color: #FFF;
 padding: 15px 20px;
 text-decoration: none;
 display: block;
 }
#menu li a:hover {
 background-color: #0186ba;
 text-shadow: 0px 0px 1px #FFF;
 }
#menu ul ul {
 position: absolute;
 top: 48px;
 visibility: hidden;
 }
#menu ul li:hover ul {
 visibility: visible;
 }
#menu ul ul:hover {
 box-shadow: 0px 20px 30px #7C7C7C;
 }
#menu ul ul li a {
 background-color: #3A3A3A;
 }
#menu ul ul li a:hover {
 background-color: #0186ba;
 }
</style>
</head>

<body>
<h1 align='center'>Punto Informatico Free - Tutorial</h1>

<div id="menu">
 <!-- Lista generale -->
 <ul>
 <!-- 1° Elemento -->
 <li><a href="#">Home</a></li>
 <!-- 2° Elemento -->
 <li><a href="#">Texbuntu</a></li>
 <!-- 3° Elemento: (Sottomenu) -->
 <li><a href="#">LyX</a>
 <ul>
 <li><a href="#">Tutorial</a></li>
 <li><a href="#">Guida</a></li>
 <li><a href="#">Homepage LyX</a></li>
 </ul>
 </li>

 <li><a href="#">Markdown</a></li>
 <li><a href="#">Html</a></li>
 </li>
 </ul>
</div>
<br>
<br>
<br>
<br>

<p align='justify'>
LyX è un word processor multi-piattaforma open source che potete usare con linux, Windows o col Mac.
E' uno dei programmi più usati dagli studenti all'università per scrivere le tesi. Questo perché oltre
a permettere di fare lavori di impaginazione all'altezza di lavori professionali consente di risparmiare
molto tempo. Immaginate poter scrivere un documento come un libro o una lunga tesi divisa in capitoli,
sezioni e sottosezioni. Poi si dice al programma di creare l'indice e lui lo crea.
Da solo crea l'indice indicando i numeri di pagina e se in seguito noi andiamo a modificare il nostro
documento lui aggiorna l'indice automaticamente. Potete immaginare che bel risparmio di tempo non dover
creare l'indice manualmente e non doverlo aggiornare manualmente per ogni modifica che noi facciamo
al documento.
….
</p>

<hr/>

</body>
</html>
Guida creare con i CSS

Guida creare con i CSS

Layout flusso standard

Codice HTML intera pagina web
