css+div 浮动分块

前段时间学过几天html，只是怀着了解的态度，能够读懂别人的页面，能够扒现成就行，一直没有自己动手去实践过，其实也不是没有实践过，前段时间扒了一个网页，想按照自己的要求来改，可后果是越改越乱。今天心血来潮，想为自己编写的留言板添加个很炫的首页，所以就抱着试一试的态度。静下来，起码自己会去思考，会去动手去尝试，主要是在这个尝试的过程中你会理解的更加深入一些。

下面贴上我的代码：（将样式先写在行内）

<table style="margin:auto;width:900px;height:430px">
    <tr>
        <td>
            <div id="bigBox"  style="margin:auto;width:890px;height:430px">
                <div id="top_left" style="background-color:blue; float:left; width:340px;height:165px">
                    Email
                </div>
                <div id="top_right" style="background-color:red; float:right; width:525px;height:340px;margin-left:16px">
                    Liuyanban
                </div>
                <div id="middle" style="float:left;width:340px;height:153px;margin-top:20px">
                    <div id="middle_left" style="background-color:purple; float:left; width:162px;height:153px;">
                    QQ
                    </div>
                    <div id="middle_middle" style="background-color:green; float:right; width:162px;height:153px;">
                        login
                    </div>
                </div>
                <div id="buttom_left" style="background-color:orange; float:left; width:340px;height:65px;margin-top:16px">
                    share
                </div>
                <div id="buttom_right" style="background-color:darkblue; float:right; width:525px;height:65px;margin-top:16px;margin-left:16px">
                    friengLink
                </div>
            </div>
        </td>
    </tr>
</table>

 

效果图：（只要在每个div加上自己设计好的图片就好了，当然也可以用js，jQuery制作一些更炫的效果）

原理：主要就是div的浮动

思路：用到了table，使其在屏幕中间显示，一个大div保证在浏览器窗口大小改变的同时里面所有div的布局不会乱。

我对浮动的理解：本身div是块级元素，很霸道，独占一行的，但是用左浮动后，只要前行除去div的宽度后剩余的宽度大于要左浮动的div宽度，即：前行的宽度能够容纳要浮动的div，那么这个div就会跟上去，到前一行的位置，右浮动也如此，只不过就是方向不同而已。