注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

彩云归

 
 
 

日志

 
 

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

2013-01-17 13:06:00|  分类: 博客装饰 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
博客装饰——多种元素组合 - 彩云归 - 彩云归

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

    一、元素及代码

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

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://hp-sozai.net/zzz/naname01.gif border=1>
<TBODY>
<TR>
<TD bgColor=#d5d5ff></TD></TR></TBODY></TABLE>
2、图片代码:
<IMG src="http://img2.ph.126.net/8nmHrNELBJGOqxc0tq25VA==/6597217101216432695.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://hp-sozai.net/zzz/naname01.gif border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#d5d5ff><IMG src="http://img2.ph.126.net/8nmHrNELBJGOqxc0tq25VA==/6597217101216432695.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://hp-sozai.net/zzz/naname01.gif border=1>
<TBODY>
<TR>
<TD align=middle bgColor=#d5d5ff><IMG id=image_operate_25821358391123984 src="http://img2.ph.126.net/8nmHrNELBJGOqxc0tq25VA==/6597217101216432695.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://hp-sozai.net/zzz/naname01.gif bgColor=#aaaaff align=center>
<TBODY>
<TR>
<TD bgColor=#d5d5ff align=middle><IMG  src="http://img2.ph.126.net/8nmHrNELBJGOqxc0tq25VA==/6597217101216432695.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)-在边框内添加内容 

  评论这张
 
阅读(1038)| 评论(7)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017