博客装饰——多种元素组合

2017-05-18  吉祥如意9...

 
  资料/彩云归   引编/吉祥如意988

 

博客装饰——多种元素组合 - 彩云归 - 彩云归

上图是由表格(框)、图片、动画、播放器叠加组合形成的。各种元素叠加组合是博客装饰常用的一种方法。其核心是使用“相对定位代码”将元素叠加在需要的位置。

一、元素及代码

博客装饰——多种元素组合 - 彩云归 - 彩云归
  

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://image106.360doc.com/DownloadImg/2017/05/1810/99479430_2.gif border=1>
<TBODY>
<TR>
<TD bgColor=#d5d5ff></TD></TR></TBODY></TABLE>

2、图片代码:
<IMG src="http://image106.360doc.com/DownloadImg/2017/05/1810/99479430_1.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&amp;
mp3n=点击此欣赏《一剪梅》&amp;mp3b=http://link.hhtjim.com/baidu/1033702.mp3&amp;gcys=aaaaff
&amp;gcdqys=d5d5ff&amp;gczh=22&amp;lrc=&#13;&#10;[00:00.00]《一剪梅》&#13;&#10;[00:26.34]真情像草原广阔......(歌词省略)&#13;&#10;[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://image106.360doc.com/DownloadImg/2017/05/1810/99479430_2.gif border=1>
<TBODY>
<TR>
<TD
align=middle bgColor=#d5d5ff><IMG src="http://image106.360doc.com/DownloadImg/2017/05/1810/99479430_1.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://image106.360doc.com/DownloadImg/2017/05/1810/99479430_2.gif border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#d5d5ff><IMG id=image_operate_25821358391123984 src="http://image106.360doc.com/DownloadImg/2017/05/1810/99479430_1.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://image106.360doc.com/DownloadImg/2017/05/1810/99479430_2.gif bgColor=#aaaaff align=center>
<TBODY>
<TR>
<TD bgColor=#d5d5ff align=middle><IMG  src="
http://image106.360doc.com/DownloadImg/2017/05/1810/99479430_1.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&amp;mp3n=点击此欣赏《一剪梅》&amp;mp3b=http://link.hhtjim.com/baidu/1033702.mp3&amp;gcys=aaaaff&amp;gcdqys=d5d5ff&amp;
gczh=22&amp;lrc=&#13;&#10;[00:00.00]《一剪梅》&#13;&#10;[00:26.34]真情像草原广阔 &#13;&#10;[00:32.63]层层风雨不能阻隔 &#13;&#10;[00:38.86]总有云开日出时候 &#13;
&#10;[00:45.43]万丈阳光照耀你我 &#13;&#10;[00:51.37]真心像梅花开过 &#13;&#10;[00:57.80]冷冷冰雪不能淹没 &#13;&#10;[01:04.02]就在最冷枝头绽放 &#13;&#10;[01:10.70]看见春天走向你我 &#13;&#10;[01:16.87]雪花飘飘北风啸啸 &#13;&#10;[01:23.25]天地一片苍茫 &#13;&#10;[01:29.58]一剪寒梅傲立雪中 &#13;&#10;[01:35.70]只为伊人飘香 &#13;&#10;[01:42.02]爱我所爱无怨无悔 &#13;&#10;[01:48.48]此情长留心间 &#13;&#10;[02:02.32] &#13;&#10;[02:26.48]真心像梅花开过 &#13;&#10;[02:32.67]冷冷冰雪不能淹没 &#13;&#10;[02:38.67]就在最冷枝头绽放 &#13;&#10;[02:45.40]看见春天走向你我 &#13;&#10;[02:51.77]雪花飘飘北风啸啸 &#13;&#10;[02:58.43]天地一片苍茫 &#13;&#10;[03:04.37]一剪寒梅傲立雪中 &#13;&#10;[03:10.44]只为伊人飘香 &#13;&#10;[03:17.04]爱我所爱无怨无悔 &#13;&#10;[03:23.38]此情长留心间 &#13;&#10;[03:40.11] &#13;&#10;" WMODE="transparent" QUALITY="high" ></EMBED></DIV>

相对定位代码更详细的说明请阅博客音画制作(5)-设定添加元素位置 

播放器代码更详细的说明请阅 制作最简MP3播放器(歌词滚动变色)

表格代码更详细的说明请阅:博客装饰-表格(1)    博客装饰-表格(2) 

博客音画制作(1)-边框(颜色)   博客音画制作(2)-边框(图片) 

博客音画制作(3)-在边框内添加内容 

    猜你喜欢
    发表评论
    喜欢该文的人也喜欢 更多