<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>div布局</title>
</head>
<body>
  <!-整个div布局大小->
<div style="width:800px">
 
<!-顶部布局->
<div style="height:100px ; width:600px ; background:#0FC ; float:left">
<p style="text-align:center ; line-height:50px">主要应用于网站首页公告和标签</p>
</div>
 
<!-右侧状态栏布局->
<div style="height:350px ; width:200px ; background:#FF0 ; float:right">
<P style="text-align:center ; line-height:200px">附加推荐菜单</P>
</div>
 
<!-左侧布局->
<div style="height:200px ; width:100px ; background:#6C6 ; float:left">
<h3>首页</h3>
<bl>
<li>衣服</li>
<li>裤子</li>
<li>鞋子</li>
<li>头饰</li>
</bl>
</div>
 
<!-右侧上布局->
<div style="width:500px ; background:#9C0 ; height:100px ;float:left">
<p style="text-align:center ; line-height:50px">第一页面显示板块</p>
</div>
 
<!-右侧下布局->
<div style="width:500px ; background:#CF0 ; height:100px ;float:left">
<p style="text-align:center ; line-height:50px">第二页面显示板块</p>
</div>
 
<div style="height:50px ; width:600px ; background:#F90 ; float:left">
<p style=" text-align:center">底部网站信息布局</p>
</div>
 
</div>
</body>
</html>