前段時間學過幾天html，只是懷着了解的態度，能夠讀懂別人的頁面，能夠扒現成就行，一直沒有自己動手去實踐過，其實也不是沒有實踐過，前段時間扒了一個網頁，想按照自己的要求來改，可后果是越改越亂。今天心血來潮，想為自己編寫的留言板添加個很炫的首頁，所以就抱着試一試的態度。靜下來，起碼自己會去思考，會去動手去嘗試，主要是在這個嘗試的過程中你會理解的更加深入一些。
下面貼上我的代碼：（將樣式先寫在行內）
1 <table style="margin:auto;width:900px;height:430px"> 2 <tr> 3 <td> 4 <div id="bigBox" style="margin:auto;width:890px;height:430px"> 5 <div id="top_left" style="background-color:blue; float:left; width:340px;height:165px"> 6 Email 7 </div> 8 <div id="top_right" style="background-color:red; float:right; width:525px;height:340px;margin-left:16px"> 9 Liuyanban 10 </div> 11 <div id="middle" style="float:left;width:340px;height:153px;margin-top:20px"> 12 <div id="middle_left" style="background-color:purple; float:left; width:162px;height:153px;"> 13 QQ 14 </div> 15 <div id="middle_middle" style="background-color:green; float:right; width:162px;height:153px;"> 16 login 17 </div> 18 </div> 19 <div id="buttom_left" style="background-color:orange; float:left; width:340px;height:65px;margin-top:16px"> 20 share 21 </div> 22 <div id="buttom_right" style="background-color:darkblue; float:right; width:525px;height:65px;margin-top:16px;margin-left:16px"> 23 friengLink 24 </div> 25 </div> 26 </td> 27 </tr> 28 </table>
效果圖：（只要在每個div加上自己設計好的圖片就好了，當然也可以用js，jQuery制作一些更炫的效果）
原理：主要就是div的浮動
思路：用到了table，使其在屏幕中間顯示，一個大div保證在瀏覽器窗口大小改變的同時里面所有div的布局不會亂。
我對浮動的理解：本身div是塊級元素，很霸道，獨占一行的，但是用左浮動后，只要前行除去div的寬度后剩余的寬度大於要左浮動的div寬度，即：前行的寬度能夠容納要浮動的div，那么這個div就會跟上去，到前一行的位置，右浮動也如此，只不過就是方向不同而已。