《进一步讨论页面布局的方法》由会员分享，可在线阅读，更多相关《进一步讨论页面布局的方法（17页珍藏版）》请在金锄头文库上搜索。
1、第11章 进一步讨论页面布局的方法 在了解了基本的层和框模型后，接下来便可以进一步去讨 论，可以做出怎样效果的页面。设计者需要将页面划分为 不同的区域，就好像是在城市规划，将不同的页面内容布 局在不同的位置，哪里放置公园、哪里放置社区、哪里是 商业区等等。页面的分布和内容所处的位置，将会给浏览 者传递重要的网站讯息。11.1 页面中的定位 当能够娴熟地将层布局在页面中时，Web设计一定会带给 用户无限的乐趣。在第10章中，定义框模型的时候，已经 了解了有一个position属性。基于这个属性的运用，可以将 页面内容定位分成静态定位、绝对定位、相对定位、固定 定位和浮动这5种方式。11.1.1
2、静态定位 position默认情况下定义的便是static属性，此时的框模型 是静态定位，和其他文本内容配合。代码的写法是： position:static;11.1.2 相对位置 如果将例子11-1中position属性改成relative，其作用表示相 对定位，那么它所相对的参照物，就是static属性下的位置 ，也就是默认情况下的位置。当设定不同的数值时，相对 于初始位置发生改变，而初识位置会留下空白占位。这里 ，可以通过top、right、bottom和left属性来控制位移。如 将示例11-1代码中的12和13句属性改写成： position:relative; /采用相对位置定位
3、left:20px;11.1.3 绝对定位 绝对定位的属性是absolute，也许它是使用最多的属性之 一。较之于相对定位的relative，它的改变在于当对象发生 位移时，原先的初始位置，如同被挖去了一样。这个对象 独立于其他的页面内容，而初始位置的空白会被其他内容 自然填补掉。 此外，绝对定位的对象并非是相对于初始位置发生位移。 事实上，它是相对于上一级的对象的初始位置发生位移。 如果上一级的对象是浏览器窗口，那么它就是相对于整个 页面来发生位移。同样，绝对定位也可以使用top、right、 bottom和left属性来控制位移。11.1.4 固定定位 固定定位比较类似于绝对定位，当页面长
4、度超出浏览器窗 口时候，此时会出现滚动条。区别就在于绝对定位下的页 面对象的框，会随着滚动条和页面一起移动，而固定定位 下的页面对象的框则不会随之滚动。同样，固定定位也可 以使用top、right、bottom和left属性来控制位移。11.2 浮动层 浮动层可以将所定义的页面内容方便地放置在页面的左边 或者右边，通常放入图像的时候使用这种方法会很方便。 事实上，浮动层中可以应用于任何对象，浮动框的代码写 法写为： float:left; 也可以定义成right和none。11.2 浮动层 浮动层定义在文本的左边，而文本被挤压在右边。所以， 浮动层并不是说会浮动在页面的上方而盖住下面的文本。
5、相反，浮动层更像是可以随意嵌入页面的一个技术。此外 ，如果不需要浮动层的左右存在页面内容，可以使用 “clear”属性来清除页面其它内容。在代码的样式表定义中 ，加入clear属性的声明，代码如下： span clear:left; 11.3 CSS的新奇技术以及未来发展 在现在流行的CSS样式设计中，包括本书中所讨论的大部 分内容都是基于CSS 2.1。而现在，CSS 3.0也慢慢地向我 们走近，其中多数功能目前还未能被广泛的支持。但是其 中不乏一些已经尝试使用的功能。11.3.1 图像替换技术 图像替换技术是指使用图像替换页面中文本的功能，类似 于在页面中插入图像，只是这种方法更为方便，易
6、于代码 管理。通常来说，设计者习惯使用有意义的图像去替换一 些标题、LOGO、某些特定的页面背景。11.3.2 CSS 3.0中的新发展 2008年开始，W3C组织起草新的CSS 3.0的标准。从中可 以发现，在新的标准中，大幅扩展了background和border 属性的功能。主要表现在对于背景图像和边框的精细修改 ，如修改边框的border-radius，它能使直角边框改成圆角 ，其效果如下图所示。11.3.2 CSS 3.0中的新发展 定义框模型下的文本阴影效果的box-shadow属性。如下图 所示。11.3.3 实现圆角框模型 目前IE 10和其他浏览器的最新版本已经能有效地支持
7、border-radius属性。11.4 案例：有效的管理页面布局 标准化工作当然是更为专业的设计习惯，本节将介绍 YAHOO公司的一种YUI Grids CSS推广的布局思路。这是 一种很好的布局页面的思路，通过这些可以学习到出色布 局经验，先解决什么问题，再解决什么问题。11.4 案例：有效的管理页面布局 此外，在布局页面时候，要养成一个良好的定义样式表命 名的习惯，如表11.1所示，仅供参考。11.4 案例：有效的管理页面布局 11.5 小结 在第10章的基础上，本章介绍了如何职业化地管理好你的 页面布局，CSS+DIV是一种流行布局方式，不仅是一项时 髦的技术，更是一门值得深究的学问。在了解的基础上， 才能够熟能生巧。当能够自由地在窗口中布局你的页面的 时候，CSS会带给你极大的成就感和乐趣。
