Layout del sito Web CSS
Layout del sito web
Un sito Web è spesso suddiviso in intestazioni, menu, contenuti e un piè di pagina:
Ci sono tonnellate di diversi design di layout tra cui scegliere. Tuttavia, la struttura sopra è una delle più comuni e daremo un'occhiata più da vicino in questo tutorial.
Intestazione
Un'intestazione si trova solitamente nella parte superiore del sito Web (o subito sotto un menu di navigazione in alto). Spesso contiene un logo o il nome del sito web:
Esempio
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Risultato
Header
Barra di navigazione
Una barra di navigazione contiene un elenco di collegamenti per aiutare i visitatori a navigare nel tuo sito web:
Esempio
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Risultato
Contenuto
Il layout in questa sezione, spesso dipende dagli utenti target. Il layout più comune è uno (o combinandoli) dei seguenti:
- 1 colonna (usata spesso per i browser mobili)
- 2 colonne (usata spesso per tablet e laptop)
- Layout a 3 colonne (utilizzato solo per desktop)
1 colonna:
2 colonne:
3 colonne:
Creeremo un layout a 3 colonne e lo cambieremo in un layout a 1 colonna su schermi più piccoli:
Esempio
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Risultato
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Suggerimento: per creare un layout a 2 colonne, modificare la larghezza al 50%. Per creare un layout a 4 colonne, utilizzare 25%, ecc.
Suggerimento: ti chiedi come funziona la regola @media? Maggiori informazioni a riguardo nel nostro capitolo CSS Media Query .
Suggerimento: un modo più moderno di creare layout di colonna consiste nell'utilizzare CSS Flexbox. Tuttavia, non è supportato in Internet Explorer 10 e versioni precedenti. Se hai bisogno del supporto di IE6-10, usa float (come mostrato sopra).
Per saperne di più sul modulo di layout della scatola flessibile, leggi il nostro capitolo CSS Flexbox .
Colonne disuguali
Il contenuto principale è la parte più grande e importante del tuo sito.
È comune con larghezze di colonna disuguali , in modo che la maggior parte dello spazio sia riservato al contenuto principale. Il contenuto laterale (se presente) viene spesso utilizzato come navigazione alternativa o per specificare informazioni rilevanti per il contenuto principale. Cambia le larghezze come preferisci, ricorda solo che dovrebbe aggiungere fino al 100% in totale:
Esempio
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Risultato
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Piè di pagina
Il piè di pagina è posizionato nella parte inferiore della pagina. Spesso contiene informazioni come copyright e informazioni di contatto:
Esempio
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Risultato
Layout del sito web reattivo
Utilizzando parte del codice CSS di cui sopra, abbiamo creato un layout del sito Web reattivo, che varia tra due colonne e colonne a larghezza intera a seconda della larghezza dello schermo:
Mai sentito parlare di W3Schools Spaces ? Qui puoi creare il tuo sito Web da zero o utilizzare un modello e ospitarlo gratuitamente.
Inizia gratuitamente ❯* nessuna carta di credito richiesta