鲨鱼网
CSS float方法实现DIV CSS网页布局三栏页
创始人
2024-07-13 07:50:37
0次

本文向大家描述一下使用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.  
  2.  
  3. Header
     
 
  •  
  • Portsidetext...  
  •  
  •  
  • Starboardsidetext...  
  •  
  •  
  • Middlecolumntext...  
  •  
  •  
  • Footertext...  
  •  
  •  
  •  

    • #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

    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    3.  
    4.  
    6. content="text/html;charset=utf-8"/> 
    7. mb5u.com 
    8.  
    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.  
    39.  
    40.  
    41.  
    42. Header-mb5u.com
       
     
  •  
  • Portsidetext...  
  •  
  •  
  • Starboardsidetext...  
  •  
  •  
  • Middlecolumntext...  
  •  
  •  
  • Footertext...mb5u.com  
  •  
  •  
  •  

    • [可先修改部分代码再运行查看效果]#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;的区别

    上一篇：选择UTM和Web安全网关的正确操作手段

    下一篇：详谈H.323协议的协议栈开发

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点，每一个服务点的员工都通过宽带路由器进行共享上网，和单位网络保持联...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛，可以帮助开发人员处理各种程序中的需求，而且还能对移动设备进行...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...