現在的網頁差不多都采用分列布局，常見的有單列布局（如百度首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見，在此只介紹以上四種。
注：混合布局可以看作是在三列布局的基礎上，再繼續分塊。本文僅從宏觀結構上介紹，比如新浪、騰訊首頁可以看作是三列布局，淘寶、京東首頁可以看做是混合布局，這些大型網站會根據其內容更改其布局。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。
兩列布局：
三列布局：
混合布局：
可以發現，網頁布局無非就是並列、嵌套、層疊這幾種，將網頁的結構分辨清楚，要設計出類似的網站也就不是什么難題了。下面來分析一下布局的相關代碼：
單列布局在於設置塊狀元素居中，只需設置margin:0 auto;(前面的0是上下外面局，可任意設置)。
兩列布局在於設置中間主體並排分布，在左邊的塊設置float:left，在右邊的塊設置float:right即可，當然要使兩者的width之和等於某一設定值；
三列布局只是在兩列布局的基礎上再將中間塊進行二次分割，方法一致，在此不做贅述。
最后說一下混合布局中的一個注意事項：由於中間主體設置了float，最后的footer需要通過清除浮動來正確顯示在主體下方，clear:both。
下面附上混合布局的部分代碼：
1 html: 2 <body> 3 <div class="top"> 4 <div class="head">head</div> 5 </div> 6 <div class="main"> 7 <div class="left">left</div> 8 <div class="right"> 9 <div class="r_sub_left">sub_left 10 </div> 11 <div class=" r_sub_right">sub_right 12 </div> 13 </div> 14 </div> 15 <div class="footer">footer</div> 16 </body> 17 18 css: 19 .top{ height:100px;background:#9CF} 20 .head,.main{ width:960px;margin: 0 auto;} 21 .head{ height:100px; background:#F90} 22 .left{ width:220px; height:600px; background:#ccc; float: left;} 23 .right{ width:740px; height:600px;background:#FCC; float:right} 24 .r_sub_left{ width:540px; height:600px; background:#9C3; float:left;} 25 .r_sub_right{ width:200px; height:600px; background:#9FC; float: right;} 26 .footer{ height:50px; background:#9F9;clear:both;}
全文完，歡迎各位朋友批評指正。