Layout del Sito Web CSS

Layout del sito web

Il sito web è solitamente diviso in intestazione, menu, contenuto e piè di pagina:

Ci sono molte diverse progettazioni di layout da scegliere. Tuttavia, la struttura elencata è una delle più comuni, e la esamineremo attentamente in questo tutorial.

Intestazione

L'intestazione (header) è solitamente posizionata nella parte superiore del sito (o sotto il menu di navigazione superiore). Contiene generalmente un logo o il nome del sito:

Esempio

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Risultato:

Intestazione

Prova da solo

Barra di navigazione

La barra di navigazione contiene una lista di link per aiutare i visitatori a navigare nel tuo sito:

Esempio

/* Contenitore della navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Link della navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Modifica del colore del link quando悬停 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Risultato:

Prova da solo

Contenuto

L'uso di quale layout dipende solitamente dal tuo pubblico di destinazione. I layout più comuni sono uno dei seguenti (o una combinazione di essi):

  • 1-colonnaLayout (solitamente utilizzato per browser mobili)
  • 2-colonneLayout (solitamente utilizzato per tablet e laptop)
  • 3-colonneLayout (utilizzato solo per computer)

1-colonna:

2-colonne:

3-colonne:

Creeremo un layout a tre colonne e lo cambieremo in un layout a una colonna su schermi più piccoli:

Esempio

/* Crea tre colonne uguali che si fluttuano una accanto all'altra */
.column {
  float: left;
  width: 33.33%;
}
/* Rimuovi il float dopo le colonne */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Layout responsive - raggruppa le tre colonne piuttosto che affiancare su schermi più piccoli (larghezza di 600 pixel o inferiore) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Risultato:

Manuale di riferimento completo delle tecnologie web

Il nostro manuale di riferimento copre ogni aspetto delle tecnologie web.

Inclusi i tecnologie standard W3C: HTML, CSS, XML. E altre tecnologie come JavaScript, PHP, SQL ecc.

Strumento di test di esempio online

Su CodeW3C.com, forniamo migliaia di esempi.

Utilizzando il nostro editor online, puoi modificare questi esempi e sperimentare il codice.

Metodo di studio veloce e facile da comprendere

Tempo è denaro, quindi ti offriamo contenuti di studio veloci e facili da comprendere.

Ecco come puoi ottenere qualsiasi conoscenza di cui hai bisogno attraverso un modello di facile comprensione.

Prova da solo

Suggerimento:Per creare un layout a 2 colonne, cambia la larghezza a 50%. Per creare un layout a 4 colonne, utilizza 25%.

Suggerimento:Vuoi sapere come funziona la regola @media? Leggi il nostro Query media CSS Impara di più su questa argomento in questa sezione.

Suggerimento:Un metodo più moderno per creare un layout a colonne è utilizzare CSS Flexbox. Tuttavia, Internet Explorer 10 e versioni precedenti non lo supportano. Se è necessario supportare IE6-10, utilizzare il float (come indicato sopra).

Per ulteriori informazioni sul modulo di layout a scatola flessibile, leggi il nostro Flexbox CSS Guida.

Colonne non uguali

Il contenuto principale (main content) è la parte più grande e più importante del tuo sito web.

Le colonne di larghezza diversa sono comuni, poiché la maggior parte dello spazio è riservata al contenuto principale. Il contenuto secondario (se presente) viene solitamente utilizzato come navigazione alternativa o per fornire informazioni correlate al contenuto principale. Puoi modificare la larghezza a tuo piacimento, ricordando solo che la loro somma deve essere del 100%:

Esempio

.column {
  float: left;
}
/* Colonne laterali */
.column.side {
  width: 25%;
}
/* Colonna centrale */
.column.middle {
  width: 50%;
}
/* Layout responsive - raggruppa le tre colonne piuttosto che affiancare */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Risultato:

Manuale di riferimento completo delle tecnologie web

Il nostro manuale di riferimento copre ogni aspetto delle tecnologie web.

Inclusi i tecnologie standard W3C: HTML, CSS, XML. E altre tecnologie come JavaScript, PHP, SQL ecc.

Strumento di test di esempio online

Su CodeW3C.com, forniamo migliaia di esempi.

Utilizzando il nostro editor online, puoi modificare questi esempi e sperimentare il codice.

Metodo di studio veloce e facile da comprendere

Tempo è denaro, quindi ti offriamo contenuti di studio veloci e facili da comprendere.

Ecco come puoi ottenere qualsiasi conoscenza di cui hai bisogno attraverso un modello di facile comprensione.

Prova da solo

Footer

Il footer si trova nella parte inferiore della pagina. Di solito contiene informazioni come i diritti d'autore e i contatti:

Esempio

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Risultato:

Footer

Prova da solo

Layout del sito web responsivo

Utilizzando questi codici CSS, abbiamo creato una layout del sito web adattivo che cambia tra due colonne e una colonna piena di larghezza in base alla larghezza dello schermo:

Prova da solo