实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>经典三列布局之圣杯总结</title>
<style>
div{ text-align:center;}
.header,.footer{ width:100%; height:60px; background:#999999; line-height:60px;}
.pagebody{ overflow:hidden; width:600px; margin:auto; padding:0 200px; background:#CCFF00}
.pagebody .main{ min-height:650px;background:#FF9966; float:left; width:100%; }
.pagebody .left,.pagebody .right{ float:left; width:200px; min-height:650px;}
.pagebody .left{ background:#00CC99; margin-left:-100%; position:relative; left:-200px;}
.pagebody .right{ background:#66FFFF;margin:0px 0px 0px -200px;position:relative; right:-200px;}
</style>
</head>
<body>
<div class="header">
<div class="content">页头</div>
</div>
<div class="pagebody">
<div class="main">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">底部</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
