一、一列布局（例如百度首页）
<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>一列布局</title><style type="text/css"> ???body{ margin:0; padding:0; font-size:30px} ???div{ text-align:center; font-weight:bold} ???.main,.footer{ width:960px; } ???.head{ width:100%; height:100px; background:#ccc} ???.main{ height:600px; background:#FCC;margin:0 auto;} ???.footer{ height:50px; background:#9CF;margin:0 auto;}</style></head><body> ???<div class="head">head</div> ???<div class="main">main</div> ???<div class="footer">footer</div></body></html>二、两列布局
<!DOCTYPE ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>二列布局</title><style type="text/css"> ???body{ margin:0; padding:0; font-size:30px; font-weight:bold} ???div{ text-align:center; line-height:50px} ???.main{ width:960px; height:600px; margin:0 auto} ???.left{ width:300px; height:600px; background:#ccc; float:left;}/*左浮动样式*/ ???.right{ width:660px; height:600px; background:#FCC; float:right;}/*右浮动样式*/</style></head><body><div class="main"> ???<div class="left">left</div> ???<div class="right">right</div></div></body></html>三、三列布局
1.通常设置宽度为%即可；如：
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>margin</title><style type="text/css"> ???body{margin:0;padding: 0;} ???.main{width: 100%;margin: 0 auto;} ???.left{width: 33.33% ;height: 500px;background-color: #ccc; float: left;} ???.middle{height: 33.33%;background-color: #999;float: left;} ???.right{width: 33.33%;height: 500px;background-color: #ddd;float: left;}</style></head><body><div class="main"> ???<div class="left">200px</div> ???<div class="middle">银杏（学名：Ginkgo biloba L.），为银杏科、银杏属落叶乔木。银杏为落叶大乔木，胸径可达4米，幼树树皮近平滑，浅灰色，大树之皮灰褐色，不规则纵裂，粗糙；有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形，老则广卵形；枝近轮生，斜上伸展（雌株的大枝常较雄株开展）。叶互生，在长枝上辐射状散生，有细长的叶柄，扇形，两面淡绿色，无毛。在长枝上散生，在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂，基部宽楔形。球花雌雄异株，单性，生于短枝顶端的鳞片状叶的腋内，呈簇生状。4月开花，10月成熟，种子具长梗，下垂，常为椭圆形、长倒卵形、卵圆形或近圆球形。种皮肉质，被白粉，外种皮肉质，熟时黄色或橙黄色。</div> ???<div class="right">300px</div></div></body>2.特殊情况，左右两列宽度固定，中间一列宽度自适应，代码如下：
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>margin</title><style type="text/css"> ???body{margin:0;padding: 0;} ???.main{width: 100%;margin: 0 auto;} ???.left{width: 200px ;height: 500px;background-color: #ccc;position: absolute;left: 0;top: 0;} ???.middle{height: 500px;background-color: #999;margin: 0 300px 0 200px;} ???.right{width: 300px;height: 500px;background-color: #ddd;position: absolute;right: 0;top: 0;}</style></head><body><div class="main"> ???<div class="left">200px</div> ???<div class="middle">银杏（学名：Ginkgo biloba L.），为银杏科、银杏属落叶乔木。银杏为落叶大乔木，胸径可达4米，幼树树皮近平滑，浅灰色，大树之皮灰褐色，不规则纵裂，粗糙；有长枝与生长缓慢的距状短枝。幼年及壮年树冠圆锥形，老则广卵形；枝近轮生，斜上伸展（雌株的大枝常较雄株开展）。叶互生，在长枝上辐射状散生，有细长的叶柄，扇形，两面淡绿色，无毛。在长枝上散生，在短枝上簇生。它的叶脉形式为“二歧状分叉叶脉”。在长枝上常2裂，基部宽楔形。球花雌雄异株，单性，生于短枝顶端的鳞片状叶的腋内，呈簇生状。4月开花，10月成熟，种子具长梗，下垂，常为椭圆形、长倒卵形、卵圆形或近圆球形。种皮肉质，被白粉，外种皮肉质，熟时黄色或橙黄色。</div> ???<div class="right">300px</div></div></body>四、混合布局（待续）
css进行网站布局
原文地址：http://www.cnblogs.com/cc-freiheit/p/7705296.html