用网页标准DIV+CSS创建固定宽度的网页布局

日期：2007年12月12日作者：查看:[大字体中字体小字体]

用 XHtml 和 Css 实现两列或三列页面布局的各个方面。到目前为止，所有例子都使用流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度）。现在是时候考虑另外一种主要的页面布局方法了，这种布局方法是固定宽度布局。

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

从table 到 div

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

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

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

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

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

以下是XHTML代码。

<body>
<div id="head">
    <h1>header</h1>
</div>
<div id="columns">
    <div id="side1">
        <h3>side1</h3>
        <ul>
            <li>Let me not to the marriage of true minds</li>
            <li>Admit impediments; love is not love</li>
            <li>Which alters when it alteration finds</li>
            <li>Or bends with the remover to remove</li>
            <li>Oh, no, it is an ever fixed mark</li>
        </ul>
[1] [2] [3] [4] 下一页
用网页标准DIV+CSS创建固定宽度的网页布局相关文章：
·深度技术 GHOSTXP V6.0装机个人版
·百度是这样清除黄色图片的
·进程调度模拟程序
·中国商人必胜宝典：各地商人性格深度剖析
·懒人下歌之百度mp3批量下载大法
·心灵的韧度
·IE只能打开百度其他网站都是无法显示
·明星壁纸：极品美女百态妩媚极度狂野
·10招加快Windows Vista启动和运行速度
·ASP.NET默认的上传组件支持进度条反映
用网页标准DIV+CSS创建固定宽度的网页布局相关软件
·速度生活_(Live For Speed) V0.5T ALPHA
·上海市2000年度《职称计算机应用基础考试练习软件》
·极度恐慌繁体汉化包
·同花顺深度行情系统(level-2)软件 V4.40.11
·高强度文件夹加密大师 9000 Build 6502
·深度GHOST工具箱 V4.0
·1080度滑雪(1080SnowBoarding)
·Vista风格硬盘进度条XP版
·速度之神：KTM X-Bow跑车壁纸
·《寂静岭4》全程进度存档

上一篇:初学者认识DOCTYPE(文档类型)的基础知识

下一篇:新手入门：来理解一下所谓的DIV+CSS网页布局

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

用网页标准DIV+CSS创建固定宽度的网页布局

精品推荐

热点TOP10

特别推荐