html+css网页设计指南 3课件.pptVIP

第11章 进一步讨论页面布局的方法 在了解了基本的层和框模型后，接下来便可以进一步去讨论，可以做出怎样效果的页面，设计者需要将页面划分为不同的区域，就好像是在城市规划，将不同的页面内容布局在不同的位置，哪里放置公园、哪里放置社区、哪里是商业区等等，页面的分布和内容所处的位置，将会给浏览者传递重要的网站讯息。 本章主要的知识点有： 了解框模型的定位以及使用它们来布局页面。 浮动层的使用。 CSS3.0的一些奇特技术以及未来发展趋势。 Yahoo的YUI Grid CSS。 11.1 页面中的定位 当能够娴熟的将层布局在页面中时，此时，Web设计一定会带给你无限的乐趣，享受过程带来的惊喜。在第10章中，定义框模型的时候，已经了解了有一个position属性。基于这个属性的运用，可以将页面内容定位分成静态定位、绝对定位、相对定位、固定定位和浮动这5种方式。 11.1.1 静态定位 position默认情况下定义的便是“static”属性，此时的框模型是静态定位，和其他文本内容配合。代码的写法是： position:static; 由于属于默认属性，所以通常都省略在代码中写出来。如代码11-1静态定位的页面形式。 【本节示例参考：资料光盘\第11章\11-1 默认情况下的静态定位.html】 11.1.2 相对位置 如果将例子11-1中position属性改成“relative”，其作用表示相对定位，那么它所相对的参照物，就是“static”属性下的位置，也就是默认情况下的位置。当设定不同的数值时，相对于初识位置发生改变，而初识位置会留下空白占位。这里，可以通过“top”、“right”、“bottom”和“left”属性来控制位移。如若代码12和13句属性改写成： position:relative; //采用相对位置定位 left:20px; 那么，这两句代码表明所约束的对象，相对于初始位置向右偏离20px的位置。所以当把代码11-1中position属性改成“relative”，其结果如图11.2所示。 11.1.3 绝对定位 绝对定位的属性是“absolute”，也许它是使用最多的属性之一。较之于相对定位的“relative”，它的改变在于当对象发生位移时，原先的初始位置。如同被挖去了一样，这个对象独立于其他的页面内容，而初始位置的空白会被其他内容自然填补掉。 此外，绝对定位的“框”并非是相对于初始位置发生位移。事实上，它是相对于上一级的“框”的初始位置发生位移。如果上一级的“框”是浏览器窗口，那么它就是相对于整个页面来发生位移。同样的，绝对定位也可以使用“top”、“right”、“bottom”和“left”属性来控制位移。 如果将代码11-1中的第12句和第13句中position属性和居左距离修改为： position:absolute; left:20px; 11.1.4 固定定位 固定定位比较类似于绝对定位，当页面长度超出浏览器窗口时候，此时会出现滚动条。区别就在于绝对定位下的页面对象的“框”，会随着滚动条和页面一起移动，而固定定位下的页面对象的“框”则不会随之滚动。同样的，固定定位也可以使用“top”、“right”、“bottom”和“left”属性来控制位移。 注意：IE7之前版本的IE浏览器不支持固定定位的“框”。 固定定位和绝对定位的性质是一样的它们所定义的“框”的位置是独立于其他页面内容之外的。这样，难免有时候它们会叠加在一起，这种情况可以使用“z轴”属性，即层的叠加特性来改变它们的顺序。（参考第10章） 11.2 浮动层 浮动层可以将所定义的页面内容方便的放置在页面的左边或者右边，通常放入图像的时候使用这种方法会很方便。事实上，浮动层中可以应用于任何对象，浮动框的代码写法写为： float:left; 也可以定义成“right”和“none”，具体的使用如代码11-2创建浮动层的方法。 【本节示例参考：资料光盘\第11章\11-2 创建浮动层.html】 11.3 CSS的新奇技术以及未来发展 在现在流行的CSS样式设计中，包括本书中所讨论的大部分内容都是基于CSS2.1。而现在，CSS3.0也慢慢的向我们走近，其中多数功能目前还未能被广泛的支持。但是其中不乏一些已经尝试使用的功能。 11.3.1 图像替换技术 图像替换技术是指使用图像替换页面中文本的功能，类似于在页面中插入图像，只是这种方法更为方便，易于代码管理。通常来说，设计者习惯使用有意义的图像去替换一些标题、LOGO、某些特定的页面背景。 这里通过一个综合的关于图像的例子，结合如何在页面中放入图像、设置背景图像、以及使用图像替换技术，如代码11-3展示的页面。 【本节示例参考：资料光盘\第11