Progettare siti da fruire su dispositivi diversi è imprescindibile nel Web design attuale. Scopriamo le tecniche fondamentali per ottenere risultati ottimi su tutti gli schermi
Sass e Less sono due Framework CSS.
E' possibile utilizzare dei costrutti tipici dei linguaggi di programmazione (variabili, funzioni,..) che vengono poi compilati in un plain CSS valido.
3. #pagina #col-sx,
#pagina #col-dx{
display:inline-block;
}
h2{
font-family: verdana;
font-size:20px;
padding:0px;
color:red;
}
h3{
font-family: verdana;
font-size:20px;
margin:40px 0px 10px 0px;
color:red;
}
h4{
margin:20px 0px 10px 20px;
}
#barra p{
margin:20px 0px 10px 20px;
}
#barra{
background-color:#ffcccc;
padding:5px;
width:870px;
margin:0px auto;
height:120px;
border-radius:0px;
color:red;
border-style:solid;
border-color:red;
border-width: 0px 10px 0px 10px;
}
#centro{
background-color:red; padding:20px;
width:860px; margin:0px 0px 10px 30px;
height:90px;
border-radius:0px;
color:white;
}
#centro p{
margin:0px 0px 0px 10px;
}
pre{
background-color:red; padding:5px;
margin:0px auto;
color:white;
}
</style>
</head>
<body>
<div id="pagina">
<div id="testata">
<h1>Usa il menu per selezionare differenti stili di fogli</h1>
<pre></pre>
</div> <!-- testata -->
<div id="col-sx"> <!-- col-sx change -->
<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>
4. 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>Stilefoglio2</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-sx change chiusura -->
<div id="col-dx"> <!-- change -->
<ul>
<li><a href="Stilefoglio1.html">Stilefoglio 1</a></li>
<li id="bottone-selezionato">Stilefoglio 2</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-dx change -->
<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>
