<!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>