Il layout CSS richiede che tu pensi al layout del tuo sito web nel suo insieme, quindi prendi i pezzi e mettili insieme. Scopri come creare un semplice layout a 3 colonne con i CSS.
01 del 09Disegna il tuo layout
È possibile disegnare il layout su carta o in un programma di grafica. Se hai già in mente una cornice metallica o un design ancora più ampio, semplificalo nelle caselle base che compongono il sito. Questo design che accompagna questo articolo ha tre colonne nell'area di contenuto principale, oltre a un'intestazione e un piè di pagina. Se guardi da vicino, puoi vedere che le tre colonne non hanno la stessa larghezza.
Dopo aver disegnato il layout, puoi iniziare a pensare alle dimensioni. Questo progetto di esempio avrà le seguenti dimensioni di base:
- Non più di 900 pixel di larghezza
- 20 px grondaia a sinistra
- 10 px tra colonne e righe
- Colonne di 250 px, 300 px e 300 px di larghezza
- La fila superiore è alta 150 px
- La fila inferiore è alta 100 px
Scrivi HTML / CSS di base e crea un elemento contenitore
Poiché questa pagina sarà un documento HTML valido, inizia con un contenitore HTML vuoto
Aggiungi gli stili CSS di base per azzerare i margini, i bordi e i paddings della pagina. Mentre ci sono altri stili CSS standard per i nuovi documenti, questi stili sono il minimo necessario per ottenere un layout pulito. Aggiungili alla testa del tuo documento:
Per iniziare a costruire il layout, inserisci un elemento contenitore. A volte capita che tu possa sbarazzarti del contenitore più tardi, ma per la maggior parte dei layout a larghezza fissa, l'elemento contenitore rende più facile la gestione attraverso diversi browser Web. Quindi nel corpo mettete questo: E nel foglio di stile CSS, inserisci: Il contenitore definisce quanto saranno ampi i contenuti della pagina web, così come i margini attorno all'esterno e il riempimento all'interno. Per questo documento, il contenitore è largo 870 px con una grondaia da 20 pixel sulla sinistra. Il grondaia è impostato con uno stile di margine, ma il riempimento sul contenitore viene azzerato per impedire a qualsiasi elemento di essere largo quanto il contenitore. #container { larghezza: 870 px; margine: 0 0 0 20 px; / * in alto a destra in basso a sinistra * / padding: 0; } Se si salva il documento ora, sarà difficile vedere il contenitore perché non contiene nulla. Se aggiungi un testo segnaposto, sarai in grado di vedere più chiaramente l'elemento contenitore. Il modo in cui decidi di modellare la riga dell'intestazione dipende molto da ciò che contiene. Se la riga di intestazione avrà solo un logo e un titolo, quindi utilizzando un tag intestazione ( L'HTML per la riga di intestazione si trova nella parte superiore del contenitore e ha il seguente aspetto: Quindi, per impostare gli stili su di esso, è stato aggiunto un bordo rosso sul fondo in modo da poter vedere dove finisce, i margini e il padding sono stati azzerati, la larghezza impostata al 100% e l'altezza a 150px: #container h1 { margine: 0; padding: 0; larghezza: 100%; altezza: 150 px; fluttuare: a sinistra; border-bottom: # c00 solid 3px; } Non dimenticare di far galleggiare questo elemento con il float: a sinistra; proprietà. La chiave per scrivere i layout CSS è far fluttuare tutto, anche le cose che hanno la stessa larghezza del contenitore. In questo modo, sai sempre dove si trovano gli elementi sulla pagina. Un selettore discendente CSS ha applicato gli stili solo agli elementi H1 che si trovano all'interno dell'elemento #container. Quando si crea un layout a tre colonne con CSS, è necessario dividere il layout in gruppi di due. Quindi, per questo layout a tre colonne, la colonna centrale e destra e raggruppati e posizionati accanto alla colonna di sinistra in un layout a due colonne in cui la colonna di sinistra è larga 250 px e la colonna di destra è larga 610 px (300 ciascuno per le due colonne , più 10px per la grondaia tra di loro). L'HTML ha questo aspetto: Ut aliquip ex ea commodo conseguat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. In riprovazione in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Il testo segnaposto nelle colonne li rende più visibili durante il test. Il CSS si presenta così: #container # col1 { larghezza: 250 px; fluttuare: a sinistra; } #container # col2outer { larghezza: 610 px; float: giusto; margine: 0; padding: 0; } La colonna a sinistra è flottante a sinistra, mentre l'altra è flottante a destra. Poiché la larghezza totale di entrambe le colonne è di 860 px, c'è una grondaia 10px tra di loro. Per creare le tre colonne, aggiungi due div all'interno della seconda colonna più ampia, proprio come hai aggiunto 2 div all'interno della colonna del contenitore nell'ultimo passaggio. L'HTML ha questo aspetto: Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur un sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. E il CSS ha questo aspetto: # col2outer # col2mid { larghezza: 300 px; fluttuare: a sinistra; } # col2outer # col2side { larghezza: 300 px; float: giusto; } Dal momento che queste due scatole da 300 px sono all'interno di una scatola da 610 px, ci sarà ancora una gronda 10px tra di esse. Ora che il resto della pagina è in stile, è possibile aggiungere il piè di pagina. Usa un ultimo div con un id "footer" e aggiungi il contenuto in modo che tu possa vederlo. Puoi anche aggiungere un bordo in alto, così saprai da dove inizia. L'HTML: Il CSS: #container #footer {
fluttuare: a sinistra;
larghezza: 870 px;
border-top: # c00 3px solido;
} 08 di 09 Ora che hai finito il layout, puoi iniziare ad aggiungere i tuoi stili e contenuti personali. Ricorda che i bordi dell'intestazione e del piè di pagina sono stati aggiunti per mostrare le sezioni di layout, non specificamente per il design. Ecco l'intero documento, HTML e CSS: Modella il contenitore
Utilizzare un tag Headline per l'intestazione
) ha più senso dell'uso di a
My Header Row
Per ottenere tre colonne, inizia con la costruzione di due colonne
Aggiungi due colonne all'interno della seconda colonna larga
Aggiungi nel piè di pagina
Aggiungi i tuoi stili e contenuti personali
L'HTML finale / CSS
