觀察可發現，一般的HTML頁面分為上中下三部分，上邊是導航一欄，中間是內容，下方是頁面的下部分。
注意html里body本身自帶8px的上下左右外邊距，如圖，在qq瀏覽器和ie里可以看到body本身是8px的margin，在設置大分區的時候，需要把該margin清零，如果有需要，帶着也可以，如果不想留這邊距，可以設置body的margin為0。
本博文介紹兩點
1：布局前清除body的margin。
2：div的float讓div在並排在一行里。
布局前如果有需要，清除body自帶的margin：
body{margin:0px;}
圖示：
本人只在上學的時候做過網頁，都是PS做好，切好用DW排版的，總的來說，一般網頁都是分為三個大區，大區就是上邊中間和下邊，上邊一般是導航條一類的，中間是內容，最后是頁腳，有點關於這個網頁或網站的備注之類的。
首先是划分大區域，然后在大區域里划分小區域。
上邊一般用來放導航條一類的，高度是固定的，下邊一般用來放頁腳一類的，高度一般也是固定的的，如果網頁中間內容比較比較固定，也可以用固定高度，但是一般內容會隨着后期修改，為了不修改內容的時候再修改樣式，一般設置成高度自適用。
div中的一些特點（相關博文：），
1.div不設置具體高度，和設置100%，就會根據高度自適用。
2.div設置具體高度，內容如果超出了，就會超出div，如果div本身有背景圖或背景色，肯定會超出了。
3.div默認是占一行，如果想並排幾個div，可以設置float
不同的定位和布局方式，有些固定位置，有些會隨着瀏覽器的大小而產生變化，樣式和大小會受容器的影響。
在使用絕對定位，相對定位等，調整上下左右位置的時候，如果用editplus，不如用dreamweaver更簡單，DW分成設計和代碼，還可以進行拖動布局。
div本身是塊狀元素，占一行，如果想並排div，可以設置float了，如圖，設置后三個div可以並排在一行里。
測試代碼：
<style> body{background:#7acbcc;margin:0px;} #header{background:#e7a0dc;width:100%;height:200px;} #body{background:#87cf7d;width:100%;} #footer{background:#e1da71;width:100%;height:200px;} </style> </head> <body> <div id="header"> </div> <div id="body">LODOP<br>內容<br>內容<br>內容<br>內容<br></div> <div id="footer"> </div> </body>
<style> body{background:#7acbcc;margin:0px;} #header{background:#e7a0dc;width:100%;height:200px;} #body{background:#87cf7d;width:100%;} #footer{background:#e1da71;width:100%;height:200px;clear:both;} #bodyleft{background:#9a99cf;width:20%;float:left;} #bodymiddle{background:#0066ff;width:30%;float:left;} #bodyright{background:#009999;width:50%;float:left;} </style> </head> <body> <div id="header"> </div> <div id="body"> <div id="bodyleft">LODOP<br>內容<br>內容<br>內容<br>內容<br></div> <div id="bodymiddle">LODOP<br>內容<br>內容<br>內容<br>內容<br></div> <div id="bodyright">LODOP<br>內容<br>內容<br>內容<br>內容<br</div> </div> <div id="footer"> </div> </body>
如圖，注意，
（1）下面的footer的下邊div，由於要另起一行，不和中間的div左浮動影響，需要設置clear:both，來讓下面的div單獨不受影響。
（2）這里中間的三個div內容高度一樣，所以布滿了，如果內容不同，也會有差異，高度少的會漏出body，這里給body加了顏色，body一般是空白，所有會有空白出現。
