Nwlapcug.com


Come creare un modello di sito Web CSS Tableless 5 colonna

Layout di una pagina web con i fogli di stile CSS anziché le tabelle può essere difficile per le persone che vengono utilizzati per codice basato su tabella, soprattutto quando si tratta di immissione di informazioni fianco a fianco, in colonne. Una volta imparate le tecniche di base, lo troverete così facile creare un modello di Web site di tableless del CSS del cinque-colonna che non potrà mai tornare indietro per i vecchi tempi delle tabelle nuovamente.

Istruzioni

Impostare il codice HTML

1

Costruire un elemento contenitore per contenere tutte le colonne nel corpo del documento HTML. Posto che div contenitore tra i tag di apertura e di chiusura body:

< div id = \ "colonna-container \" >
...
< / div >

2

Inserire cinque più div all'interno del div contenitore: uno per ogni colonna. Dare loro il \"column,\ classe" che utilizzeremo più tardi per dare loro stile.

< div id = \ "colonna-container \" >

&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>
&lt;div class=\&quot;column\&quot;>&lt;/div>

< / div >

3

Assicuratevi di che avere un foglio di stile di cui si fa riferimento o un tag style nella sezione head del documento:

< head >

&lt;link rel=\&quot;stylesheet\&quot; type=\&quot;text/css\&quot; href=\&quot;styles.css\&quot;>

< / head >
< corpo >

OR

< head >

&lt;style type=\&quot;text/css\&quot;>
...
&lt;/style>

< / head >
< corpo >

Il primo metodo è consigliabile, a meno che non stai lavorando su una pagina che non è possibile modificare in quanto a causa di linee guida aziendali.

Impostare i CSS

4

Applicare lo stile contenitore seguente nel foglio di stile o tra i tag di stile nel passaggio precedente.

div#column-container {
width:95%

VAI

margin:0 auto

VAI

overflow:auto

VAI

border:1px solid #000

VAI

}

Questo contenitore esiste per tenere le colonne in modo che possono essere collocati sullo schermo, ad esempio in un layout di pagina centrata. In questo esempio, il contenitore è 95% la larghezza dello schermo del navigatore e centrato. C'è un confine così è facile vedere dove il contenitore si trova nella pagina. Utilizzando una tecnica sviluppata da CSS esperto Paul O'Brian e reso popolare su SitePoint.com, il \"overflow:auto\" regola le forze le colonne per \"clear\" affinché il contenitore non crolli di altezza pari a zero.

5

Applicare lo stile di colonna seguente sotto il codice nel passaggio precedente:

div#column-container div.column{
width:20%

VAI

margin:0

VAI

padding:0

VAI

float:left

VAI

}

Questo codice rende ogni colonna esattamente un quinto (20%) della larghezza del contenitore. Il \"float\" rende istruzione si accumulano le colonne da sinistra a destra, la colonna più a sinistra, essendo la prima colonna visualizzata nel markup HTML.

6

Caricare il documento nel browser preferito per vedere i risultati del codice.