Hvordan lage en 5 kolonne Tableless CSS Website Template
Legging ut en nettside med gjennomgripende stilark i stedet for tabeller kan være vanskelig for folk som er vant til tabell-basert kode, spesielt når det gjelder å plassere informasjon ved siden av hverandre, i kolonner. Når du lære grunnleggende teknikker, vil du synes det er så enkelt å lage en fem-kolonne tableless CSS nettside mal som du aldri vil gå tilbake til de dårlige gamle dager med bord igjen.
Bruksanvisning
Sett opp HTML
1 Konstruer en beholder element for å holde alle kolonnene i kroppen av HTML-dokumentet. Plasser som beholder div mellom åpning og lukking body tags:
<Div id = \ "kolonne-container \">
...
</ Div>
2 Plasser fem flere divs i beholderen div: ett for hver kolonne. Gi dem klassen \ "-kolonnen, \" som vi skal bruke senere for å gi dem stil.
<Div id = \ "kolonne-container \">
<div class=\"column\"></div>
<div class=\"column\"></div>
<div class=\"column\"></div>
<div class=\"column\"></div>
<div class=\"column\"></div>
</ Div>
3 Kontroller at du har en referert stilark eller stil tag i hodet delen av dokumentet:
<Head>
<link rel=\"stylesheet\" type=\"text/css\" href=\"styles.css\">
</ Head>
<Body>
ELLER
<Head>
<style type=\"text/css\">
...
</style>
</ Head>
<Body>
Den første metoden er anbefalt, med mindre du jobber på en side som du ikke kan endre i den forbindelse på grunn av selskapets retningslinjer.
Sett opp CSS
4 Påfør følgende container stil i stilarket eller mellom stil koder i forrige trinn.
div#column-container {
width:95%
GÅ
margin:0 auto
GÅ
overflow:auto
GÅ
border:1px solid #000
GÅ
}
Denne beholder er til for å holde søylene slik at de kan plasseres på skjermen, for eksempel i en sentrert sideutforming. I dette eksempel er beholderen 95% av bredden av nettleseren skjermen, og sentrert. Det er en grense, så det er lett å se hvor beholderen sitter på siden. Ved hjelp av en teknikk utviklet av CSS-ekspert Paul O'Brian og gjort populært på SitePoint.com, den \ "overflow: auto \" tvinger regel kolonnene til \ "klart \", slik at beholderen ikke kollapser til null høyde.
5 Påfør følgende kolonne stil under koden i forrige trinn:
div#column-container div.column{
width:20%
GÅ
margin:0
GÅ
padding:0
GÅ
float:left
GÅ
}
Denne koden gjør hver kolonne nøyaktig en femtedel (20%) av bredden av beholderen. Den \ "flyter \" statement gjør kolonnene stable opp fra venstre mot høyre, venstre kolonne være den første kolonnen som vises i HTML-markup.
6 Legg dokumentet i din favoritt nettleser for å se resultatet av koden.