写于2010-11-07 15:36:28 阅读:221 分类:
源代码练习 作者:
习之摘要:这里是一个音画练习作品的实例,和对应的源代码。目的是为了直观地理解绝对定位和“原点”的概念。
再学“绝对定位”(二)
下面是用源代码做的一个音画练习。一共有五个素材:背景图;枫树林的照片;透明flash小菊花;唐诗《山行》;音乐播放器。除了背景图外,其余四个都采用了“绝对定位”。全篇源代码全部用div层来实现:在外面是一个相对定位层,用来规划绝对定位层的原点,原点就位于背景层的左上角 (发散阳光处)。这个音画,无论拷贝到那里,这个“原点”是一起拷贝过去的,因此所有绝对定位的内容都不会飘走。
唐·杜牧
《山行》
远上寒山石径斜,
白云生处有人家。
停车坐爱枫林晚,
霜叶红于二月花。
下面是上面音画的全部源代码:(11月11日前后加了居中标签)
<table align="center"><tbody><tr><td>
<div id="d1" style="position:relative; top:0px; left:0px; width:600; height:360; overflow:hidden;">
<img src="//image40.360doc.com/DownloadImg/2011/10/2915/18854683_2.jpg"
width="600" height="360" border="0" \>
<div id="d2" style="position:absolute; left:40px; top: 60px;">
<img src="//image40.360doc.com/DownloadImg/2011/10/2915/18854683_3.jpg"
width="320" height="240" style="border: 4px solid #ffeeee" >
<div id="d2_1" style="position:absolute; left: 278px; top:220px;">
<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>
</div>
<div id="d3" style="position:absolute; left: 0px; top:240px;">
<embed
src="//xizhi.200vip.com/mtv/flower30.swf" width="160" height="120"
wmode="transparent"></embed>
</div>
<div id="d4" style="position:absolute; left: 400px; top:110px;">
<span style="color: #800000;font-size:18px; font-family: 楷体,楷体_gb2312;
writing-mode :tb-rl;line-height:1.4em; font-weight:bolder;text-align:center">
<font color="#ffeeee">唐·杜牧<br />《山行》</font><br>
远上寒山石径斜,<br \>
白云生处有人家。<br \>
停车坐爱枫林晚,<br \>
霜叶红于二月花。</span>
</div>
</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--
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。