September 8
Layout di una pagina web con i fogli di stile a cascata, invece di tabelle può essere difficile per le persone che vengono utilizzati per il codice basato su tabelle, soprattutto quando si tratta di affiancando le informazioni a fianco, in colonne. Una volta imparato le tecniche di base, lo troverete in modo semplice la creazione di un modello di sito web CSS tableless cinque colonne che non andrete mai indietro ai brutti e vecchi giorni di tavoli di nuovo.
1 Costruire un elemento contenitore per contenere tutte le colonne nel corpo del documento HTML. Posizionare che div contenitore tra l'apertura e la chiusura del corpo tag:
<Div id = \ "colonna-contenitore \">
...
</ Div>
2 Mettere altri cinque div div all'interno del contenitore: uno per ogni colonna. Dare loro la classe \ "colonna \", che useremo in seguito per dare loro stile.
<Div id = \ "colonna-contenitore \">
<div class=\"column\"></div>
<div class=\"column\"></div>
<div class=\"column\"></div>
<div class=\"column\"></div>
<div class=\"column\"></div>
</ Div>
3 Assicurarsi di avere un foglio di stile di riferimento o tag stile nella sezione head del documento:
<Head>
<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">
</ Head>
<Body>
O
<Head>
<style type=\"text/css\">
...
</style>
</ Head>
<Body>
Si consiglia il primo metodo, a meno che non si sta lavorando su una pagina che non è possibile modificare in tal senso a causa di linee guida aziendali.
4 Applicare la seguente stile container nel foglio di stile o tra i tag di stile nel passaggio precedente.
div#column-container {
width:95%
ANDARE
margin:0 auto
ANDARE
overflow:auto
ANDARE
border:1px solid #000
ANDARE
}
Questo contenitore esiste per contenere le colonne in modo che possano essere collocati sullo schermo, per esempio in un layout di pagina centrata. In questo esempio, il contenitore è 95% della larghezza della schermata del browser, e centrato. C'è un confine così è facile vedere dove il contenitore si trova sulla pagina. Usando una tecnica sviluppata da esperti CSS Paul O'Brian e reso popolare sul SitePoint.com, il "overflow: auto \" \ regola costringe le colonne di \ "chiaro \" in modo che il contenitore non collassa a quota zero.
5 Applicare la seguente stile di colonna sotto il codice nel passaggio precedente:
div#column-container div.column{
width:20%
ANDARE
margin:0
ANDARE
padding:0
ANDARE
float:left
ANDARE
}
Questo codice rende ogni colonna esattamente un quinto (20%) della larghezza del contenitore. Il \ "galleggiare \" dichiarazione rende le colonne impilare fino da sinistra a destra, la colonna più a sinistra è la prima colonna che appare nel vostro markup HTML.
6 Caricare il documento nel browser preferito per vedere i risultati del vostro codice.