Fogli di stile CSS (CSS) consentono di creare un layout per siti Web senza l'utilizzo di tabelle. Le tabelle vengono ancora utilizzate in alcuni layout web, ma il CSS "div" design è comodo. Il tag div sostituisce le righe e le colonne di una tabella e i tag sono semplici da creare nel layout HTML. È possibile creare cinque colonne CSS utilizzando questi tag div, che offrono un design segmentato per pagine web. Creazione di un layout CSS per il tuo sito richiede solo poche righe di codice.

Istruzioni

1

Aprire il file HTML in qualsiasi editor. HTML è modificato in testo normale, in modo che un editor semplice come blocco note consente di creare una pagina web CSS.

2

Creare i tag div. Ogni tag div che si crea rappresenta una colonna nella pagina. Poiché l'obiettivo è di rendere cinque colonne, hai bisogno di cinque tag div:

< div id = "Colonna1" >< / div >
< div id = "Colonna2" >< / div >
< div id = "column3" >< / div >
< div id = "column4" >< / div >
< div id = "column5" >< / div >

3

Creare il div "wrapper". Il wrapper contiene tutte le colonne sulla tua pagina. Il seguente codice avvolge le colonne in un div principale:

< div id = "wrapper" >
< div id = "Colonna1" >< / div >
< div id = "Colonna2" >< / div >
< div id = "column3" >< / div >
< div id = "column4" >< / div >
< div id = "column5" >< / div >
< / div >

4

Inserire alcuni contenuti nelle colonne CSS. Si inserisce alla fine immagini e contenuti in colonne, ma questo consente di testare il layout di colonna e visualizzarla nel browser:

< div id = "wrapper" >
< div id = "Colonna1" > colonna 1 < / div >
< div id = "Colonna2" > colonna 2 < / div >
< div id = "column3" > colonna 3 < / div >
< div id = "column4" > colonna 4 < / div >
< div id = "column5" > colonna 5 < / div >
< / div >

5

Salvare il file HTML e aprirlo nel browser web. Mostra il tuo nuovo layout HTML per testare il codice.