CSS float方法实现DIV CSS网页布局三栏页

开发 前端
三栏布局是目前最常见的DIV CSS网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。这里向大家描述一下如何使用CSS float方法实现DIV CSS网页布局三栏页。

本文向大家描述一下使用CSS float方法实现DIV CSS网页布局三栏页,现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。

DIV CSS网页布局三栏页CSS float方法

三栏布局是目前最常见的DIV CSS网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。

现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难;但是得到液态布局就有点困难了。因此,本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。

基本方法:

基本的布局包含五个div,即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽,中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定,因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整洁的栏中,甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。

三栏布局的一个例子:请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。

XHTML代码:

ExampleSourceCode

  1. <body> 
  2. <dividdivid="header"> 
  3. <h1>Header</h1> 
  4. </div> 
  5. <dividdivid="left"> 
  6. Portsidetext...  
  7. </div> 
  8. <dividdivid="right"> 
  9. Starboardsidetext...  
  10. </div> 
  11. <dividdivid="middle"> 
  12. Middlecolumntext...  
  13. </div> 
  14. <dividdivid="footer"> 
  15. Footertext...  
  16. </div> 
  17. </body> 
  18.  

#p# CSS代码:

ExampleSourceCode 

  1. body{  
  2. margin:0px;  
  3. padding:0px;  
  4. }  
  5. div#header{  
  6. clear:both;  
  7. height:50px;  
  8. background-color:aqua;  
  9. padding:1px;  
  10. }  
  11. div#left{  
  12. float:left;  
  13. width:150px;  
  14. background-color:red;  
  15. }  
  16. div#right{  
  17. float:right;  
  18. width:150px;  
  19. background-color:green;  
  20. }  
  21. div#middle{  
  22. padding:0px160px5px160px;  
  23. margin:0px;  
  24. background-color:silver;  
  25. }  
  26. div#footer{  
  27. clear:both;  
  28. background-color:yellow;  
  29. }  

代码演示:

SourceCodetoRun

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=utf-8"/> 
  7. <title>mb5u.com</title> 
  8. <styletypestyletype="text/css"> 
  9. body{  
  10. margin:0px;  
  11. padding:0px;  
  12. }  
  13. div#header{  
  14. clear:both;  
  15. height:50px;  
  16. background-color:aqua;  
  17. padding:1px;  
  18. }  
  19. div#left{  
  20. float:left;  
  21. width:150px;  
  22. background-color:red;  
  23. }  
  24. div#right{  
  25. float:right;  
  26. width:150px;  
  27. background-color:green;  
  28. }  
  29. div#middle{  
  30. padding:0px160px5px160px;  
  31. margin:0px;  
  32. background-color:silver;  
  33. }  
  34. div#footer{  
  35. clear:both;  
  36. background-color:yellow;  
  37. }  
  38. </style> 
  39. </head> 
  40. <body> 
  41. <dividdivid="header"> 
  42. <h1>Header-mb5u.com</h1> 
  43. </div> 
  44. <dividdivid="left"> 
  45. Portsidetext...  
  46. </div> 
  47. <dividdivid="right"> 
  48. Starboardsidetext...  
  49. </div> 
  50. <dividdivid="middle"> 
  51. Middlecolumntext...  
  52. </div> 
  53. <dividdivid="footer"> 
  54. Footertext...mb5u.com  
  55. </div> 
  56. </body> 
  57. </html> 

[可先修改部分代码再运行查看效果]#p#

代码说明

HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上(屏幕两侧),并让中栏的内容将“流”入它们之间的空间。假如浏览器在一个或者两个边栏div之前先发现中栏,那么中栏将占据屏幕的一侧或者两侧,这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。

div#header和div#footer样式(style)中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间。div#header样式中的padding:1px申明用来消除页头背景色中的异常边,假如padding设置为零,那么在Netscape浏览器中就会看到这个异常。

div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度,不过你也可以把它的宽度设置为其它具体值。类似的,div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中,float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而,假如这些div被其它div包含,那么float将会把它们挤压到包含它们的div的边缘。

在div#middle样式中,clear申明答应中栏的内容“流淌”在两个边栏之间。padding:0px160px5px160px申明设置了到左栏和右栏的填充,这样答应150象素宽度的栏div,在加上10象素的间距。

这个例子非常粗糙和简单,但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。

【编辑推荐】

  1. CSS实现鼠标悬停tip效果
  2. JavaScript动态创建div属性和样式
  3. DIV CSS网页布局时合理架构CSS
  4. CSS2.0中page-break-after属性用法
  5. 探究CSS中border:none;与border:0;的区别
责任编辑:佚名 来源: 52css.com
相关推荐

2010-08-24 15:45:48

DIVCSSfloat

2010-09-09 10:56:56

CSS

2010-09-10 14:06:47

DIV固定CSS

2010-09-06 15:46:08

CSSDIV

2010-08-24 15:31:51

DIVCSS

2010-09-02 09:32:09

DIV CSS

2010-08-17 11:12:18

DIV CSS

2010-08-17 13:28:31

DIVCSS

2010-09-03 15:40:42

最小高度DIVCSS

2010-08-16 14:18:49

DIV+CSS

2011-06-03 15:32:25

CSS

2010-09-03 15:59:19

DIV CSS

2010-08-23 09:59:16

DIV+CSSSEO

2010-08-27 13:46:58

DIV+CSS

2010-09-10 10:36:30

DIV CSS

2010-09-14 17:07:26

DIV浮动定位CSS

2010-08-30 14:57:21

DIV+CSS

2010-08-24 13:01:13

DIV+CSS

2010-08-23 13:59:32

DIV CSSmarginpadding

2010-08-30 10:58:19

DIV CSSfloat
点赞
收藏

51CTO技术栈公众号