相关文章
网站设计解决图层的精确定位问题
北京网页设计PHP和ASP在Dreamweaver 8中调用IE预览
北京网页设计制作网页时关于网页浏览器兼容问题的分析
网站制作打造Vista风格按钮
北京网站设计实现连续长字符在IE与FireFox下自动换行的方法
北京网站设计用FrongPage设计网页花样
北京网站制作网页制作小技巧：隐藏网页的滚动条的方法
企通互联建立用户体验过程的实用指南
网页设计设计理论：网站首页应该放什么内容？
北京网站制作网页特效：滑动展开与折叠效果
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 北京网页设计网站建设CSS floats创建三栏网页布局
北京网页设计网站建设CSS floats创建三栏网页布局
企通互联网站建设
绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局的网页。
现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。
基本方法北京网站制作
网站设计
基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。 站.长站
三栏布局的一个例子
站.长.站
请看看用本文所介绍的技术进行三栏布局的例子。网页设计
这个例子用鲜艳的颜色来区分布局的各个div。 Www~Chinaz~com
XHTML代码：北京网站建设
Example Source Code Chinaz.com
网页设计<body>网站制作
<div id="header">企通互联
<h1>Header</h1>网页设计
</div>网站建设
<div id="left">网站设计
Port side text...网站设计
</div>北京网页设计
<div id="right">网站设计
Starboard side text...企通互联
</div>网站建设
<div id="middle">网页设计
Middle column text...网站设计
</div>网站制作
<div id="footer">北京网站设计
Footer text...网站建设
北京网站建设</div>网站建设
</body>
下面是CSS代码：网站设计
Example Source Code 网页设计
企通互联
body {网站设计
margin: 0px;网站制作
padding: 0px;网站设计
}北京网站设计
div#header {北京网页设计
clear: both;网页设计
网站设计 height: 50px;北京网站设计
background-color: aqua; 北京网站设计网站设计
padding: 1px;北京网站制作
}网站建设
div#left {网站制作
网站建设 float: left;北京网站设计
width: 150px;北京网站建设
background-color: red;网站建设
}网页设计
div#right {企通互联
float: right;网站设计
width: 150px;网页设计
background-color: green;网站制作
}北京网站制作 北京网页设计
div#middle {网站建设
padding: 0px 160px 5px 160px;企通互联
margin: 0px;北京网站建设
background-color: silver;北京网站设计
}网页设计
div#footer {网站设计
clear: both;网页设计
background-color: yellow;网页设计
} 中.国.站.长.站
上一篇：网站设计FrontPage设计网页如何禁用JavaScript
下一篇：网站建设CSS floats创建三栏网页布局