2013-01-17 13:06:00
上图是由表格（框）、图片、动画、播放器叠加组合形成的。各种元素叠加组合是博客装饰常用的一种方法。其核心是使用“相对定位代码”将元素叠加在需要的位置。
一、元素及代码
1、表格（框）代码：
<TABLE style="BORDER-RIGHT: #aaaaff 3px solid; BORDER-TOP: #aaaaff 3px solid; FONT-SIZE: 14px; MARGIN-BOTTOM: 5px; BORDER-LEFT: #aaaaff 3px solid; WIDTH: 670px; BORDER-BOTTOM: #aaaaff 3px solid; HEIGHT: 518px" borderColor=#aaaaff cellSpacing=6 align=center bgColor=#aaaaff background=http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_4.gif border=1>
<TBODY>
<TR>
<TD bgColor=#d5d5ff></TD></TR></TBODY></TABLE>
2、图片代码：
<IMG src="http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_3.jpg
" width=610>
3、动画（雪）代码：
<EMBED src=http://dashan.gotoip1.com/sc/xue/雪花飞舞(圆型).swf width=590 height=400 type=application/x-shockwave-flash QUALITY="high" ></EMBED>
4、播放器代码：
<EMBED src=http://dashan.gotoip1.com/bfq/zjmp3bfqgdgc-bs.swf width=550 height=80 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent" FLASHVARS="mp3=http://fs1.shtyle.fm/dynimg/fshr/B7/CD/54644151_17.mp3&mp3n=点击此欣赏《一剪梅》&mp3b=http://link.hhtjim.com/baidu/1033702.mp3&gcys=aaaaff&gcdqys=d5d5ff&gczh=22&lrc= [00:00.00]《一剪梅》 [00:26.34]真情像草原广阔......(歌词省略) [03:23.38]此情长留心间"></EMBED>
二、叠加组合
1、表格与图片组合
使用表格的功能，将图片插入表格之中。
代码如下：（红字部分为插入图片的代码）
<TABLE style="BORDER-RIGHT: #aaaaff 3px solid; BORDER-TOP: #aaaaff 3px solid; FONT-SIZE: 14px; MARGIN-BOTTOM: 5px; BORDER-LEFT: #aaaaff 3px solid; WIDTH: 670px; BORDER-BOTTOM: #aaaaff 3px solid; HEIGHT: 518px" borderColor=#aaaaff cellSpacing=6 align=center bgColor=#aaaaff background=http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_4.gif border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#d5d5ff><IMG src="http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_3.jpg" width=610></TD></TR></TBODY></TABLE>
2、表格、图片与动画组合
使用定位代码将动画（雪）叠加在图片之中。代码追加在表格、图片代码之后。
代码如下：（红字部分为定位代码，蓝字部分为动画的代码）
<TABLE style="BORDER-RIGHT: #aaaaff 3px solid; BORDER-TOP: #aaaaff 3px solid; FONT-SIZE: 14px; MARGIN-BOTTOM: 5px; BORDER-LEFT: #aaaaff 3px solid; WIDTH: 670px; BORDER-BOTTOM: #aaaaff 3px solid; HEIGHT: 518px" borderColor=#aaaaff cellSpacing=6 align=center bgColor=#aaaaff background=http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_4.gif border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#d5d5ff><IMG id=image_operate_25821358391123984 src="http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_3.jpg" width=610></TD></TR></TBODY></TABLE>
<DIV style="MARGIN-TOP: -480px; MARGIN-LEFT: 120px"><EMBED src=http://dashan.gotoip1.com/sc/xue/雪花飞舞(圆型).swf width=590 height=400 type=application/x-shockwave-flash QUALITY="high" WMODE="transparent"></EMBED></DIV>
3、表格、图片、动画与播放器组合
使用定位代码将播放器叠加在图片之中。代码追加在表格、图片、动画代码之后。
效果视本文开头。
代码如下：（红字部分为定位代码，蓝字部分为播放器的代码）
<TABLE style="BORDER-BOTTOM: #aaaaff 3px solid; BORDER-LEFT: #aaaaff 3px solid; WIDTH: 670px; MARGIN-BOTTOM: 5px; HEIGHT: 518px; FONT-SIZE: 14px; BORDER-TOP: #aaaaff 3px solid; BORDER-RIGHT: #aaaaff 3px solid" border=1 cellSpacing=6 borderColor=#aaaaff background=http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_4.gif bgColor=#aaaaff align=center>
<TBODY>
<TR>
<TD bgColor=#d5d5ff align=middle><IMG src="
http://image86.360doc.com/DownloadImg/2015/07/1000/55869933_3.jpg" width=610></TD></TR></TBODY></TABLE>
<DIV style="MARGIN-TOP: -480px; MARGIN-LEFT: 120px"><EMBED height=400 type=application/x-shockwave-flash width=590 src=http://dashan.gotoip1.com/sc/xue/雪花飞舞(圆型).swf allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"></DIV>
<DIV style="MARGIN-TOP: 3px; MARGIN-LEFT: 165px"><EMBED src=http://dashan.gotoip1.com/bfq/zjmp3bfqgdgc-bs.swf width=550 height=80 type=application/x-shockwave-flash FLASHVARS="mp3=http://fs1.shtyle.fm/dynimg/fshr/B7/CD/54644151_17.mp3&mp3n=点击此欣赏《一剪梅》&mp3b=http://link.hhtjim.com/baidu/1033702.mp3&gcys=aaaaff&gcdqys=d5d5ff&gczh=22&lrc= [00:00.00]《一剪梅》 [00:26.34]真情像草原广阔 [00:32.63]层层风雨不能阻隔 [00:38.86]总有云开日出时候 [00:45.43]万丈阳光照耀你我 [00:51.37]真心像梅花开过 [00:57.80]冷冷冰雪不能淹没 [01:04.02]就在最冷枝头绽放 [01:10.70]看见春天走向你我 [01:16.87]雪花飘飘北风啸啸 [01:23.25]天地一片苍茫 [01:29.58]一剪寒梅傲立雪中 [01:35.70]只为伊人飘香 [01:42.02]爱我所爱无怨无悔 [01:48.48]此情长留心间 [02:02.32] [02:26.48]真心像梅花开过 [02:32.67]冷冷冰雪不能淹没 [02:38.67]就在最冷枝头绽放 [02:45.40]看见春天走向你我 [02:51.77]雪花飘飘北风啸啸 [02:58.43]天地一片苍茫 [03:04.37]一剪寒梅傲立雪中 [03:10.44]只为伊人飘香 [03:17.04]爱我所爱无怨无悔 [03:23.38]此情长留心间 [03:40.11] " WMODE="transparent" QUALITY="high" ></EMBED></DIV>
相对定位代码更详细的说明请阅《
博客音画制作（5）－设定添加元素位置 》
播放器代码更详细的说明请阅
制作最简MP3播放器（歌词滚动变色）表格代码更详细的说明请阅：
博客装饰－表格（1） 博客装饰－表格（2）博客音画制作（1）－边框（颜色） 博客音画制作（2）－边框（图片）博客音画制作（3）－在边框内添加内容
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
