<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;font-size: 12px;margin: 10px;} .mainnav{font-size: 14px;text-indent: -112px;} .mainnav a{padding-left: 15px;} .input{margin-top: 5px;} .input input{width: 450px;height: 32px;} .input button{width: 95px;height: 38px;} .subnav{margin-top: 35px;} .wrapper{height: 100%;position: fixed;min-height: 500px;width: 100%;} .footer{position: absolute;bottom: 80px; width: 100%;} .footersub1{margin-top: 20px;} .footersub2{font-size: 12px;} </style> </head> <body> <div class="wrapper"> <div class="header"> <a href="">搜索設置</a> <a href="">|</a> <a href="">登錄</a> <a href="">注冊</a> </div> <img class="logo" src="baidu.gif"> <div class="mainnav"> <a href="">新聞</a> <a href="">網頁</a> <a href="">貼吧</a> <a href="">知道</a> <a href="">音樂</a> <a href="">圖片</a> <a href="">視頻</a> <a href="">地圖</a> </div> <div class="input"> <input type="text"> <button>百度一下</button> </div> <div class="subnav"> <a href="">百科</a> <a href="">文庫</a> <a href="">hao123</a> <a href="">|</a> <a href="">更多>></a> </div> <div class="footer"> <div> <a href="">把百度設為首頁</a> </div> <div class="footersub1"> <a href="">加入百度</a> <a href="">|</a> <a href="">搜索風雲榜</a> <a href="">|</a> <a href="">關於百度</a> <a href="">|</a> <a href="">About Baidu</a> </div> <div class="footersub2"> <a href="">©2014 Baidu 使用百度前必讀 京ICP證030173號 <img src="gs.gif"></a> </div> </div> </div> </body> </html>
我個人比較喜歡使用div做布局，不知道這樣布局有木有問題？難點在於實現“footer“跟隨瀏覽器底端移動！（1隨着瀏覽器的底端上下運動PS：具體效果可以參考百度首頁）
關鍵點在於“wrapper”，這個大的div具有瀏覽器的高度（因為高度100%PS：我是這樣理解的）還設置了一個最小高度min-height（不能讓1移動到其它內容部分）position: fixed是讓div相對於瀏覽器定位。
“footer”中的position: absolute;bottom: 80px;（“footer”相對於父節點wrapper絕對定位，bottom是1距離底部的距離）。
PS：難點就在於對“wrapper”和“footer”的理解。