软件频道>网页陶吧>网页制作教程网站推广ASP视频教程网页制作手册|软件频道产品中心 软件下载
您现在的位置: 天极网 > 软件频道 > 网页陶吧 > 使用 CSS 创建固定宽度的布局
全文

使用 CSS 创建固定宽度的布局

2006-05-20 17:50作者:出处:天极网责任编辑:龙犊

我最近的几篇专栏文章讨论了使用 XHTML 和 CSS 实现两列或三列页面布局的各个方面。到目前为止,所有例子都使用流式布局(也就是布局会自动扩展和适应浏览器窗口的宽度)。现在是时候考虑另外一种主要的页面布局方法了,这种布局方法是固定宽度布局。

很多 Web 构建人员倾向于使用固定宽度的布局进行页面设计,因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近,对于设计人员和访问者来说都是一个很重要的舒适因素;另外,对于包含很多大图片和其它元素的内容,由于它们在流式布局中不能很好地表现,因此固定宽度布局也是处理这种内容的最好方法。

table div

近年来,设计人员都使用表(table)来创建固定宽度的布局。表的列和行是对设计人员的布局表格(grid)的一种可行的模拟,所以一点也不奇怪设计人员为什么采用 HTML 表来完成页面布局。

然而,基于表的布局有一个明显的问题。除了语义上不适合用表来进行布局之外,产生的代码也很混乱,难于阅读,甚至难于维护——尤其是在包含合并的表单元格(cell)和嵌套表时。

使用 div 进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外,代码的装载速度会更快,也更易于处理。

表及其单元格的格式(formatting)属性被借用到固定宽度布局中,因为指定这些元素的尺寸相当简单。其实通过 div 可以做到同样的事情,只要确定 div 精确的维数并使用绝对和相对定位将这些 div 定位到页面上即可。

图 A 展示了一个典型的固定宽度的布局,该布局由顶部的一个标题,一个三列内容的区域(主内容列,每侧有一个工具条),和页面底部的一个页脚所组成。所有元素的宽度都是固定的;在浏览器窗口发布变化时它们的尺寸都不会变化。

下面的 XHTML 标记生成图 A 所示的页面。(出于简单考虑,内容被截短。)

软件资讯·软件下载尽在天极软件

共5页。 1 2 3 4 5 下一页 末页
相关搜索:
关注此文读者还看过
热门关注
特别推荐
文章排行
本周
本月
最近更新
关于我们|About us|网站律师|天极服务|电子杂志|RSS订阅|加入我们|网站地图
TMG
Copyright (C) 1999-2009 Chinabyte.com, All Rights Reserved 版权所有 天极网络
商务联系、网站内容、合作建议:010-82657868
版权声明 在线提交意见反馈 渝ICP证B2-20030003号
经营性网站备案信息 网警备案 中国网站排名
天极传媒:天极网|比特网|IT专家网|IT商网|52PK游戏网|IT分众