文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络网站建设Div+Css使用 DIV+CSS 创建固定宽度的布局
精品推荐
特别推荐
·初学者来看:学习网页技术CSS怎么入门?
·CSS网页设计非常有用技巧
·DIV+CSS的命名规则有利于网站优化
·多个CSS样式表争夺特定选择符的控制权
·学习CSS制作网页总结的一些经验技巧
·CSS初学者应该保持的一种心态
·CSS常见问题和技巧总结
·DIV+CSS常见错误汇总
·设计中常用的十个CSS技巧
·网站配色,CSS主色调配色方案
热点TOP10
·Div+CSS+JS树型菜单,可刷新
·Web网页标准学习:从“div+css”说起谈结构的重要性
·DIV CSS网页布局实例:十步学会用CSS建站
·Javascript +CSS横向三级导航菜单
·初学者来看:学习网页技术CSS怎么入门?
·CSS和XHTML经验:类目之间的竖线问题引发的讨论
·CSS解决表格或图片内容将页面撑开的办法
·学习CSS制作网页菜单举一反三
·CSS:鼠标经过时改变背景颜色或图片
·学习CSS网页制作技术:ul打造表格样式

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

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

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

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

table div

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

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

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

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

一个固定宽度的例子

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

图A

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

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

<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>
    </div>
    <div id="content">
        <h2>main content</h2>
        <p>That looks on tempests ... his height be taken.</p>
        <p>But bears it out ... alteration finds.</p>

[1] [2] [3] [4] 下一页 



上一篇:CSS在IE与Firefox下不同的解析及解决方案

下一篇:用CSS属性选择器控制链接样式

相关文章:
·GHOST使用方法(图解)
·使用TenyQQ 快速升级为太阳用户
·推荐:漂亮的手机上使用的墙纸图片分享下载
·教你一分钟学会使用免费网络电话Skype
·教您如何使用无线上网全攻略
·为什么iexplore.exe在打开网页时CPU使用会100%?
·溯雪使用说明
·Vista系统使用技巧总结
·Photoshop画笔工具基本使用
·键盘的使用与指法训练
相关软件:

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.vipcn.net
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.vipcn.net All Rights Reserved. 鄂ICP备05000083号Powered by:viphot