用网页标准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》全程进度存档
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
精品推荐
热点TOP10
- ·DIV+CSS布局入门实例教程
- ·创建一个纯CSS的水平导航条
- ·设计一个基于CSS的网页模板
- ·Javascript+CSS横向三级导航菜单
- ·站长推荐:53个CSS-不可或缺的技巧
- ·CSS文本:word-wrap
- ·网页设计基础:Div+CSS布局入门教程
- ·如何使用CSS来进行网页排版
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS中的滑动门技术
- ·DIV CSS网页布局导航菜单源代码(17)
- ·使用CSS处理表格边框样式化
- ·DW MX 2004 CSS 属性详解
- ·CSS文本:text-overflow
- ·如何用CSS定义表格与模拟表格
- ·如何用css设置网页字体
- ·总结:用CSS进行网页样式设计攻略全集
- ·使用纯 CSS 设计3D按钮
- ·小技巧:div+css高度自适应
- ·深入了解CSS的继承性及其应用
特别推荐
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS样式设计之CSS滤镜资料小结
- ·总结:用CSS进行网页样式设计攻略全集
- ·创建一个纯CSS的水平导航条
- ·如何用css设置网页字体
- ·CSS中的滑动门技术
- ·Javascript+CSS横向三级导航菜单
- ·CSS文本:word-wrap
- ·用CSS进行网页样式设计攻略全集
- ·用CSS实现的固定表头的HTML表格
- ·CSS属性列表
- ·如何使用CSS来进行网页排版
- ·使用纯 CSS 设计3D按钮
- ·纯CSS制作简洁的垂直导航
- ·网页设计基础:Div+CSS布局入门教程
- ·CSS 制作的三级菜单特效代码
- ·设计一个基于CSS的网页模板
- ·如何用CSS定义表格与模拟表格
- ·用CSS制作的美国国旗
- ·DW MX 2004 CSS 属性详解
