《基礎網頁製作》一個超簡單的div佈局,製作靜態網頁很簡單
阿新 • • 發佈:2019-01-29
<!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>