css+div 浮动分块

最新推荐文章于 2024-07-21 21:30:38 发布

转载最新推荐文章于 2024-07-21 21:30:38 发布 · 158 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dreamflycc/p/float.html

文章标签：

#javascript #ViewUI

本文分享了作者在学习HTML及CSS过程中的实践心得，通过一个留言板首页的设计案例，介绍了如何利用div浮动实现布局，并探讨了浮动原理及其应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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