第 二 章 标 签 应 用
第三十一节 定位标签应用（3）
本节继续讲解定位标签的应用。下面讲解两个方面的内容：一、css的绝对定位与相对定位；二、绝对定位应用举例（移动顶图、移动底图、左右侧图、大图片中添加小图片。）。
一、css的绝对定位与绝对定位：
css的绝对定位样式代码：
style="LEFT: 0px; WIDTH: 940px; POSITION: absolute; TOP: 20px"
绝对定位(absolute)，将赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则，则依据body对象左上角作为参考点进行定位。
css的相对定位样式代码：
style="LEFT: 0px; WIDTH: 940px; POSITION: relative; TOP: 20px"
相对定位是指相对它应该在的位置所做的移动，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。
绝对定位应用举例:
（一）移动顶图代码：
代码解析：
1、此代码先设置了一个块区标签、一个移动标签和一套表格标签。
2、在块区标签中设置了绝对定位的样式：居左：0px，居上：24px。定位这个位置确定了制作的顶图上边缘的起点，它不会“遮盖”图书馆首页上方的“首页、阅览室、馆友、装扮我的首页、消息、帮助、留言交流、登录、退出”一行按钮。
3、在移动标签中设置了绝对定位的样式：居左：0px，宽度：1350px。这个定位确定了制作的顶图能够在图书馆首页上方“全屏幕”显示。高度：280px，适合选用了首页皮肤为钟爱一生、幸福左岸的馆友使用。使用其它首页皮肤的馆友可以根据自己选用的首页皮肤修改这个高度。
4、在表格的第一个单元格中，输入了六个宽度为450px、高度为280px的图片（六个图片的总宽度必须大于移动屏幕的宽度）；在表格的第二个单元格中，插入了一个隐藏的播放器。
5、应用此代码制作的作品为有背景音乐的、全屏显示的移动顶图。
（二）移动底图代码：
代码解析：
移动底图与移动顶图的代码基本相同，只要把块区标签中的代码top: 24px修改为down: 0px即可。当然了，移动标签、表格标签、图片标签中的高度值都可以适当加大。
（三）左侧图代码：
代码解析：
1、上面的代码是左侧图的代码。块区标签中设置了绝对定位的样式：style="left: 0px; top: 304px; position: absolute;" 表格中每行设置一个单元格，每个单元格内放置一个图片。
2、移动标签、表格标签、图片标签中的宽度设置为180px——190px为宜。
3、把块区标签、移动标签中的左（left）修改为右（right），其它的代码不变，就是右侧图的代码。
（四）大图片中添加小图片代码：
</td></tr></tbody></table></td></tr></tbody></table></div>
代码解析：
1、此代码先设置了一个居中对齐的块区标签，在块区标签中放入一个五重表格；
2、在第五层表格的单元格中设置了三个块区标签。
在第一个块区标签中，设置了“居左440px ，居上634px”的绝对定位样式，在块区的首标签与尾标签之间放入了一个“高度为508px宽度为354px”的女模特动画图片。
在第二个块区标签中，设置了“居左150px ，居上860px”的绝对定位样式，在块区的首标签与尾标签之间放入了一个“高度为404px宽度为400px”的gif图片。
在第三个块区标签中，设置了“居左200px ，居上280px”的绝对定位样式，在块区的首标签与尾标签之间放入了一个“高度为300px宽度为780px”的闪光动画图片。作业：
作业：
1、认识css的绝对定位与相对定位的样式代码。
2、在360图书馆中收集你喜爱的图片，将图片地址替换到上面的代码中，试着制作移动顶图、移动底图、移动左侧图、移动右侧图各一篇。
3、应用css的绝对定位样式代码，在大图中添加几个小图片。
4、通过你的制作，体会css的绝对定位样式代码的用法。
2012年12月28日于北京
