1. 程式人生 > >《基礎網頁製作》一個超簡單的div佈局,製作靜態網頁很簡單

《基礎網頁製作》一個超簡單的div佈局,製作靜態網頁很簡單

<!DOCTYPE html>
<html>
<head>
<meta 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>

ifram框架效果