Un sito web è spesso suddiviso in intestazioni, menu, contenuti e piè di pagina:
Un'intestazione si trova solitamente nella parte superiore del sito Web (o proprio sotto il menu di navigazione in alto). Spesso contiene un logo o il nome del sito web:
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Una barra di navigazione contiene un elenco di collegamenti per aiutare i visitatori a navigare nel tuo sito web:
/* Il contenitore della barra di navigazione */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Collegamenti della barra di navigazione */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Collegamenti: cambia colore al passaggio del mouse */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Il layout in questa sezione dipende spesso dal target degli utenti. Il layout più comune è uno (o la loro combinazione) tra i seguenti:
Creeremo un layout a 3 colonne e lo modificheremo in un layout a 1 colonna sugli schermi più piccoli:
/* Crea tre colonne uguali che fluttuano una accanto all'altra */
.column {
float: left;
width: 33.33%;
}
/* Cancella i float dopo le colonne */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - fa in modo che le tre colonne siano impilate una sopra l'altra invece che una accanto all'altra su schermi più piccoli (600px di larghezza o meno) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Il contenuto principale è la parte più grande e più importante di un sito.
È comune con colonne di larghezza diversa, in modo che la maggior parte dello spazio sia riservata al contenuto principale. Il contenuto laterale (se presente) viene spesso utilizzato come navigazione alternativa o per specificare informazioni rilevanti per il contenuto principale. Modificare le larghezze come da preferenza, ricordando solo che la somma dovrebbe arrivare al 100% in totale:
.column {
float: left;
}
/* Colonna sinistra e destra */
.column.side {
width: 25%;
}
/* Colonna centrale */
.column.middle {
width: 50%;
}
/* Responsive layout - rende le tre colonne una sopra l'altra invece che una accanto all'altra */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
Il piè di pagina viene posizionato nella parte inferiore della pagina. Spesso contiene informazioni come copyright e informazioni di contatto:
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Utilizzando parte del codice CSS riportato sopra, abbiamo creato un layout del sito Web responsive, che varia tra due colonne e colonne a larghezza intera a seconda della larghezza dello schermo: