css+div 浮动分块

前段时间学过几天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>
View Code

 

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

原理：主要就是div的浮动

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

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

posted @ 2013-07-18 17:01  dreamfly_cc  阅读(10008)  评论(1)  编辑  收藏  举报