Menu di navigazione:

step 1: impostiamo gli stili generici

Titolo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc at sapien in metus vulputate hendrerit. Nullam hendrerit mauris non lacus feugiat facilisis. Aliquam non turpis. Nullam et arcu sed nunc bibendum vestibulum. Curabitur accumsan tincidunt lorem. Quisque quis elit.

Vai allo step 2

Per prima cosa realizziamo la struttura (X)HTML del box: un div contenitore (<div id="container">...</div>), e tre div che abbiamo chiamato rispettivamente "gancio1", "gancio2" e "gancio3" il cui scopo, come detto precedentemente, è fornire un un supporto per le immagini che ci serviranno per creare i bordi arrotondati.
In questo primo step cominciamo a scrivere sul foglio di stile iniziando a definire gli stile generici del box. Definiamo i margini e il padding per gli elementi 'h4' e 'p' e lo stile del carattere; infine, impostiamo la larghezza del div contenitore al 100% applicando anche un colore di sfondo.

(X)HTML:

<div id="container">
 <div class="gancio1">
  <div class="gancio2">
   <div class="gancio3">
    <h4>Titolo</h4>
    <p> Lorem ipsum dolor sit amet...
   </div>
  </div>
 </div>
</div>

CSS:

div#container{
width:70%;
background:#dd5800;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
}
div.gancio3 h4{
margin:0;
padding:10px;
font-size:1.2em;
}
div.gancio3 p{
margin:0;
padding:10px;
font-size:1em;
}

Vai allo step 2

torna su