Css+Div布局学习(一)—Div布局基础

如果我们要进行Css的布局,那float(浮动)就是最为关键的一个属性了。浮动可以使你的块元素不遵守元素流的布局特性,如果不采用浮动,元素将一个接一个地往下排列。float属性有三个值:left、right和none,后面我们就会使用这些值的。我们将使用事例来说明布局的特性。

我们做一个html文件,为后面的讲解准备一下:

  1. <body>
  2. <div id="Masthead">Masthead</div>
  3. <div id="Sidebar_a">Sidebar_a</div>
  4. <div id="Sidebar_b">Sidebar_b</div>
  5. <div id="Content">Content</div>
  6. <div id="Footer">Footer</div>
  7. </body>

这样的html使用浏览器打开一定是就几个字符把,我们先加一些简单的Css来标记,这样可以更加清楚地看到页面的布局。

  1. body
  2. {
  3.   padding:10px;
  4.   margin:10px;
  5. }
  6. div
  7. {
  8. border:1px solid #000;
  9. background-color:#CCC;
  10. height:20px;
  11. padding:10px;
  12. text-align:Center;
  13. }
  14. #Masthead
  15. {
  16. margin-bottom:10px;
  17. background-color:#CCCCCC;
  18. }
  19. #Sidebar_a
  20. {
  21. margin-bottom:10px;
  22. background-color:#3399CC;
  23. }
  24. #Sidebar_b
  25. {
  26. margin-bottom:10px;
  27. background-color:#33ff33;
  28. }
  29. #Content
  30. {
  31. margin-bottom:10px;
  32. background-color:#ff3366;
  33. }
  34. #Footer
  35. {
  36. background-color:#ffff00;
  37. }

我们给每一个Div加上了一个边框,并给每一个Div使用上背景颜色,方便标志。

 

Masthead
Sidebar_a
Sidebar_b
Content
Footer

 

上面5个Div,分别代表了网页模板里面最常见的表头、表尾、两个边栏和中间的内容。现在还没有添加更多的Css,所以还只是5个从上到下的Div而已。我们先分析一下,首先表头Masthead和表尾Footer两部分已经基本符合要求了,不会需要做更多的改变,那就是中间的两个边栏Sidebar和内容Content需要从左往右排列,我们先看看完成的Css和布局的样子:

Masthead
Sidebar_a
Sidebar_b
Content
Footer
  1. #Masthead
  2. {
  3. background-color:#CCCCCC;
  4. margin-bottom:10px;
  5. }
  6. #Sidebar_a
  7. {
  8. float:left;
  9. width:25%;
  10. margin-bottom:10px;
  11. background-color:#3399CC;
  12. }
  13. #Sidebar_b
  14. {
  15. float:right;
  16. width:25%;
  17. margin-bottom:10px;
  18. background-color:#33ff33;
  19. }
  20. #Content
  21. {
  22. margin-bottom:10px;
  23. height:150px;
  24. background-color:#ff3366;
  25. }
  26. #Footer
  27. {
  28. clear:both;
  29. background-color:#ffff00;
  30. }

首先说明一下,所有的html没有作任何修改,只是添加了一些Css。
比较前面和后面的Css,Masthead和Content里面的内容没有什么改变,Content里面的height:150px;只是为了说明内容较多情况下会是怎么样的情况。关键就是Sidebar_a内的float:left;和Sidebar_b内的float:right;。正是这两个属性使我们的布局顺利完成了。大家还可以自己尝试一下,把Sidebar_a和Sidebar_b内的属性换一下,两个边栏的位置就对换了,这个正体现了Div+Css布局的灵活性。

Masthead
Sidebar_a
Sidebar_b
Content
Footer

我们别忘记了在表尾Footer内有clear:both;属性,这个属性又是做什么的呢?浮动使用了以后会对后面的元素造成影响,所以要清理掉。
注意:上面的Html里面的五个Div不能顺便的变换位置,不然就不能正常地显示。特别是Content要在两个边栏的后面。
上面只是简单地说明了Div的布局,大家要熟练使用还是自己多多练习了。

你可能感兴趣的:(html,css,浏览器)