it | es | en

Layout CSS gratis 4 colonne centrato da scaricare

Homepage Informazioni Contatti



Scarica il layout
6KB [.zip]

Layout CSS 4 Colonne Centrato

Il layout CSS a quattro colonne è l'evoluzione del layout a tre colonne, grazie alle maggiori risoluzioni, per una impaginazione ancora più professionale.

Codice HTML

<div class="main">
<div class="header">
<img src="/minilogo.png" width="143" height="59" alt="iPort - Layout gratis per il tuo sito internet" />
</div>
<div class="content">
<div class="col1">Colonna 1</div>
<div class="col3">Colonna 3</div>
<div class="col4">Colonna 4</div>
<div class="col2"><h1>Layout 4 colonne centrato</h1><p>Il layout CSS a quattro colonne è l'evoluzione del layout a tre colonne, grazie alle maggiori risoluzioni, per una impaginazione ancora più professionale.</p>
</div>
</div>
<div class="copy"><small>Design by <a href="//www.iport.it" title="Layout gratis per il tuo sito internet">iPort</a></small></p></div>
</div>

Codice CSS

body {background-color:#666;font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif}
.main { width:996px;margin:auto; background-color:#eee; overflow:hidden; color:#666; text-align:center; margin-top:20px; }
.content {overflow:hidden; padding-bottom:10px;}
.col1 {width:200px;float:left;margin-left:10px;margin-top:10px;}
.col2 {margin-left:220px; padding-top:40px;background-color:#fafafa;margin-right:420px;margin-top:10px;padding-bottom:20px;height:440px;}
.col3 {width:200px;float:right;margin-left:10px;margin-top:10px;}
.col4 {width:200px;float:right;margin-left:10px;margin-top:10px;}
.header {background-color:#fff;height:50px;overflow:hidden;text-align:left;}
h1 {margin:0px;line-height:42px;font-size:40px;width:70%;margin:auto;}
p {width:70%;margin:auto;margin-top:40px;font-size:24px;text-align:left;}
.copy {text-align:right;border-top:1px solid #fff;padding-top:10px;padding-right:10px;clear:both;background-color:#666;color:#fff;height:64px;}
a {text-decoration:none;color:#ccc;}

Potrebbe interessare

Styler il CMS online

Crea e gestisci i tuoi layout CSS in ogni parte direttamente online in modo visuale. Vai

Templates gratis

Le migliori risorse sul web da dove scaricare o prendere spunto per il tuo template. Vai

Effetti jQuery gratis

Aggiungi un effetto jQuery alle tue pagine per renderle più interattive e accattivanti. Vai

Layouts

Esempi di layout CSS da scaricare gratuitamente

Risorse di Web Design