再学“绝对定位”（二）

写于2010-11-07 15:36:28 阅读:221 分类:源代码练习作者:习之

摘要：这里是一个音画练习作品的实例，和对应的源代码。目的是为了直观地理解绝对定位和“原点”的概念。

再学“绝对定位”（二）

下面是用源代码做的一个音画练习。一共有五个素材：背景图；枫树林的照片；透明flash小菊花；唐诗《山行》；音乐播放器。除了背景图外，其余四个都采用了“绝对定位”。全篇源代码全部用div层来实现：在外面是一个相对定位层，用来规划绝对定位层的原点，原点就位于背景层的左上角（发散阳光处）。这个音画，无论拷贝到那里，这个“原点”是一起拷贝过去的，因此所有绝对定位的内容都不会飘走。

唐·杜牧

《山行》

远上寒山石径斜，

白云生处有人家。

停车坐爱枫林晚，

霜叶红于二月花。

下面是上面音画的全部源代码：(11月11日前后加了居中标签)

<img src="//image40.360doc.com/DownloadImg/2011/10/2915/18854683_2.jpg"

width="600" height="360" border="0" \>

<img src="//image40.360doc.com/DownloadImg/2011/10/2915/18854683_3.jpg"

width="320" height="240" style="border: 4px solid #ffeeee" >

<embed

src="//www.oldkids.cn/upload/12000/u11139/2010/11/03/blog_201011031703562.swf"

flashvars="mp3=http://www.ttxfood.com/images/pf.mp3&autostart=1&autoreplay=1"

width="42" height="20" wmode="transparent"></embed>

</div>

<embed

src="//xizhi.200vip.com/mtv/flower30.swf" width="160" height="120"

wmode="transparent"></embed>

</div>

<span style="color: #800000;font-size:18px; font-family: 楷体,楷体_gb2312;

writing-mode :tb-rl;line-height:1.4em; font-weight:bolder;text-align:center">

远上寒山石径斜，<br \>

白云生处有人家。<br \>

停车坐爱枫林晚，<br \>

霜叶红于二月花。</span>

</div>

</td></tr></tbody></table>

上面的源代码用不同的颜色表示了不同的内容。最外层红色的代码（id="d1"）就是一个用来规划原点的相对定位层。第二行黑色的代码，是一个用img标签显示的一张背景图，它是一个不用绝对定位表示的内容；蓝色的代码（id="d2"）是枫树林照片的定位层，照片用了4px宽的白色边框；夹在蓝色代码里的黄色代码（id="d2_1"）是一个嵌套的div层，用于只有两个按钮的音乐播放器，位于枫林照片的右下角。接下来的白色代码（id="d3"）是左下角的透明Flash小花；下面的紫色代码（id="d4"）是右面的唐诗《山行》，它采用了直排的文本格式。

从代码的架构来分析，上面的代码共有五个定位层，分三个层级：最外面的相对定位层d1是第一级，显示背景图；第二级是d2枫林照、d3小花Flash、d4唐诗；第三级是隶属于枫林照的d2_1音乐播放器。特别要说明的是这里有意安排了这个div的嵌套层-音乐播放器层，它也是一个绝对定位层，但它嵌套在枫林照的绝对定位层内，这样的安排使枫林照和音乐播放器绑定。由于嵌套的关系，音乐播放器层的原点就移到了枫林照的左上角。如果改变枫林层的坐标数据，可以不必改变音乐播放器层的坐标值，播放器始终位于枫林照的右下角。

这里一共有五个div定位层，因此有五对标签，上面代码梯级显示可以看出它们一一对应的关系。最后一个红色标签是对应第一行的红色的div起始标签。

对于各层的坐标（left、top）数据，因为知道了坐标的原点位置，都是可以简单计算得到的。例如小花Flash层的top数据：top=背景图高-Flash高=360-120 = 240。

在计算枫林照的位置时，要注意照片有4px的边框，照片大小是360*240，实际的面积是368*248，代码里取了top=60，因此照片的下面空52（照片略偏下）。

理论上，坐标位置还可以设置right和bottom，但这时必须设置层的width和height。很多时候，我们并不是实际计算left和top的，而是边调整，边观察，合适为止。因为计算结果与实际显示的位置还会有偏差，特别是top数据。在老小孩老版本里大约要差4px，因此实际调整最重要。

在最外层的相对定位层里增加了宽、高、及超出该面积范围的部分设置成“隐藏”（overflow:hidden）。这是因为音画的大小是已知的600*360，那么将露出外面的内容（有时候有意要截去一点Flash）隐藏起来不显示，这能解决边缘不整齐的现象。

音画发表到博客上，还有个“对齐”的问题。因为相对定位里有left的设置，可以改变left的值，调整音画在博客里的左右位置。通常我们只要它“居中”显示，那么可以将这段代码套在一个表格(table)标签里，在table里设置 align="center" 对中属性。这是简单可靠的方法。也可以在这组代码的前后加center标签（前是起始标签，后是结束标签，必须要有，不能省），但是前提是定位层一定要设置层的宽度。

要实现上面音画的效果可以用不同的方法。不一定只用div标签，可以用table与div相结合，相对和绝对相结合，等等。这里只是为了练习定位层的使用方法而特意这样写的。

我们了解了绝对定位的概念，那么上面的音画里，背景图也可以换成一篇文章、一张信纸、一个flash等等，在背景音画上可以加多个flash，也可以加gif图、文字、移动字幕等等。div定位层还可以嵌套，只要熟练掌握定位层的用法，我们可以制作出许许多多丰富多彩的音画。

--END--

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。