Template gratuito CSS/HTML

TEMPLATE CSS FREE - pag 4

Come costruire un sito responsive. Template a tre colonne con header e footer. Layout CSS e HTML. Aggiornamento 2018

Concludiamo di impostare il nostro sito responsive, scrivendo il contenuto del body.
Ricordati di seguire e di copiare tutti i codici in ordine, se sei arrivato qui in un altro modo, ti consiglio di ritornare alla pagina iniziale della spiegazione di questo template in HTML e CSS per scoprire come si fa un layout responsive a tre colonne con header e footer per il tuo sito. Vai qui


<body>

<div class="header">
<p> Sostituisci questo testo con un testo che vuoi appaia nell' header </p>
</div>

In questa prima parte abbiamo creato un DIV a cui abbiamo associato la classe header impostata prima nello stile con il CSS.
Adesso creiamo un DIV a cui impostiamo la classe row, e altri tre che saranno le nostre colonne.


<div class="row">
  <div class="column" style="background-color:#aaa;">Colonna 1</div>
  <div class="column" style="background-color:#bbb;">Colonna 2</div>
  <div class="column" style="background-color:#ccc;">Colonna 3</div>
</div>

Ad ogni colonna abbiamo impostiamo uno sfondo che puoi cambiare a tua scelta.
Finiamo la nostra pagina con il DIV del footer e chiudiamo la pagina.


<div class="footer">
  <p>Scrivi qui quello che vuoi compaia nel footer</p>
</div>

</body>
</html>

Dopo aver copiato tutti questi codice in ordine, salva la tua pagina come file HTML e vedrai il risultato!
Ridimensiona la finestra del browser per vedere come si adatta alle nuove dimensioni! Hai così a disposizione un template gratuito per il tuo sito responsive!
Personalizzalo seguendo la guida HTML

Guida base al CSS

TEMPLATE CSS FREE - pag 4

Alcuni libri consigliati per imparare e approfondire i codici del CSS