



全文预览已结束
下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
用float 构建三栏divcss网页布局 日期:2009-5-30 0:24:31 | 来源 52CSS.com | 复制网址 | 转发朋友 | 打印 | 评论 许多网络设计者正在从 XHTML 标志和 CSS 格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从 CSS 中得到固定宽度的布局并不困难;但是得到液态布局就有点困难了因此,现在都开始抛弃基于表格的布局技术。本文介绍一种用 CSS float 和 clear 属性来获得三栏液态布局的方法。 主要页内容放在中间一栏,三栏布局是目前最常见的网页布局。边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。 用这些技术可以生成带有表格、创建固定宽度布局或者 “ 液态 ” 可以根据用户浏览器窗口宽度自动伸缩)布局的网页。 绝大多数网页设计者都熟悉传统的网页设计技术。 基本方法:基本的布局包含五个div,即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽,中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定,因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中,甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。三栏布局的一个例子:请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。XHTML代码:Example Source Code HeaderPort side text.Starboard side text.Middle column text.Footer text.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;代码演示:Source Code to Run 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;Header - Port side text.Starboard side text.Middle column text.Footer 可先修改部分代码 再运行查看效果 代码说明 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:0px 160px 5px 160px申明设置了到左栏和右栏的填充,这样允许150象素宽度的栏div,在加上10象素的间距。这个例子
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 质量 安全生产管理制度
- 安全生产部署会会议记录
- 防暴恐安全演练方案
- 415国家安全日活动方案
- 医院安全生产重点部位有哪些
- 安全生产演练简报
- 施工企业办理安全生产许可证
- 安全生产安全事故调查报告的主要内容
- 建筑工地安全例会会议记录
- 安全事故奖惩管理制度
- 毁林毁草违规行为集中整治实施方案
- 日本2025年食品过敏原培训
- 中新天津生态城教育系统招聘教职人员笔试真题2024
- GB/T 45817-2025消费品质量分级陶瓷砖
- DB37∕T 5302-2024 既有城市桥梁现场检测及承载能力评估技术标准
- 安徽省池州市贵池区2024-2025学年八年级下学期数学期末检测试卷(含答案)
- 正畸接诊标准化流程
- 中心静脉压(CVP)监测与护理
- 酒店前台接待礼仪与沟通技巧练习题
- 床上用品采购 投标方案
- 口腔工艺管理课件
评论
0/150
提交评论