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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML如何给自己的图片加上精美边框图片(续篇二)  

2011-03-27 14:32:04|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

如何给自己的图片加上精美边框图片

 

博文简介

 

 

 

上一篇主要介绍了在边框里加图片并带移动和水波纹效果,这篇主要突出精美的边框里加自动唱歌的小flash歌曲,再续前缘,丰富画面,让我们的网页更加绚丽多彩。

 

动态图片边框加flash歌曲或者其他flash

相对和绝对定位控制图片边框和图片叠加

 

 

相关Flash代码链接:

自动播放swf格式小视频

Flash圆形雾化移动特效代码

Flash透明动画多个叠加在一张背景图片上

Flash透明动画或文字特效添加一幅背景图

Flash动画代码的说明运用

Flash现成动画代码与获取动画代码

 

 

七、动态图片边框加flash歌曲或者其他flash
HTML代码:

 

HTML基本代码:

<CENTER>
<TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
<TBODY>
<TR>
<TD>
<P align=center>
<EMBED style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px" src=flash地址 width=宽度 height=高度 type=application/x-shockwave-flash allowScriptAccess="never" allowNetworking="internal" quality="high" wmode="transparent">
</P>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>

 

HTML实例代码一:

(不带音乐的flash)

<CENTER>
<TABLE height=600 width=500 background=http://img838.ph.126.net/hQKgrYnBu0KwvkkxmSeRBA==/816558907438711664.gif border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Alpha(opacity=100,style=2); WIDTH: 460px; HEIGHT: 580px" src=http://s3photo.cn21edu.com/UpLoadImage/yyfq/image/ArticleFlash/40cbbf34-6d4c-4df8-832d-ce89c8fe0e36.swf width=460 height=580 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> </P></TD></TR></TBODY></TABLE></CENTER>

 

HTML实例代码二:

(带音乐的flash)

<CENTER>
<TABLE height=600 width=500 background=http://img838.ph.126.net/hQKgrYnBu0KwvkkxmSeRBA==/816558907438711664.gif border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Alpha(opacity=100,style=2); WIDTH: 320px; HEIGHT: 320px" src=http://s3photo.cn21edu.com/UpLoadImage/yyfq/image/ArticleFlash/8f8cb254-ed75-4094-948e-831cf750de21.swf width=320 height=320 type=application/x-shockwave-flash wmode="transparent" quality="high" allowNetworking="internal" allowScriptAccess="never"> </P></TD></TR></TBODY></TABLE></CENTER>

 

HTML代码示例: 

 

  HTML实例一:

HTML实例二:
 
 

 
HTML代码详解:

 

  • 表格居中属性:
    <CENTER>...</CENTER>
  • 表格背景边框代码:
    <TABLE width=背景宽度 background="背景边框图片地址" height=背景高度 border=0>
    <TBODY><TR><TD>...</TD></TR></TBODY></TABLE>
  • 单元格居中属性:
    <P align=center>...</P>
  • flash代码:
    <EMBED  src=flash地址 width=宽度 height=高度 type=application/x-shockwave-flash allowScriptAccess="never" allowNetworking="internal" quality="high" wmode="transparent">
  • flash代码中添加了圆形雾化滤镜:
    style="FILTER: Alpha(opacity=100,style=2); WIDTH: 滤镜宽度px; HEIGHT: 滤镜高度px"

 

八、相对和绝对定位控制图片边框和图片叠加
HTML代码:

 

HTML基本代码:

<TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" height=500 cellSpacing=0 cellPadding=0 width=1008 align=center border=0>
<TBODY>
<TR>
<TD width="100%">
<TABLE cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
<TBODY>
<TR>
<TD style="LEFT: 200px; WIDTH: 300px; POSITION: absolute; TOP: 30px; HEIGHT: 300px"><IMG height=200 src="图片地址" width=200> </TD></TR>
<TR>
<TD style="LEFT: 150px; WIDTH: 300px; POSITION: absolute; TOP: 20px; HEIGHT: 300px"><IMG height=300 src="边框图片地址" width=300> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

HTML实例代码:

 

<TABLE style="LEFT: -120px; WIDTH: 800px; POSITION: relative; TOP: 0px" height=500 cellSpacing=0 cellPadding=0 width=808 align=center border=0>
<TBODY>
<TR>
<TD width=800>
<TABLE cellSpacing=0 cellPadding=0 width=800 align=center border=0>
<TBODY>
<TR>
<TD style="LEFT: 200px; WIDTH: 300px; POSITION: absolute; TOP: 30px; HEIGHT: 300px"><IMG height=200 src="http://img617.ph.126.net/oc9b7rCMDG4pv4JphMoCjQ==/1910370666937359816.jpg" width=200> </TD></TR>
<TR>
<TD style="LEFT: 150px; WIDTH: 300px; POSITION: absolute; TOP: 20px; HEIGHT: 300px;"><IMG height=300 src="http://img844.ph.126.net/vgogUl8b9SdyFIK_9a3x5Q==/896779275800407029.gif" width=300> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

 

HTML代码示例: 

 
2011年03月27日 - qy-0824 - 启野的博客
2011年03月27日 - qy-0824 - 启野的博客
HTML代码详解:

 

  • 这是一组组合最好的大幅音画定位的好帖子代码

  • 相对和绝对定位代码

    相对定位代码:POSITION: relative
    style="LEFT: 200px; WIDTH: 300px; POSITION: relative; TOP: 30px; HEIGHT: 300px"
    绝对定位代码:POSITION: absolute
    style="LEFT: 200px; WIDTH: 300px; POSITION: absolute; TOP: 30px; HEIGHT: 300px"
    这两组代码适宜图片和FLASH。

  • 1、先设置一组相对定位表格代码:来控制整个画面
    (总表格的高度height大于绝对定位对象的高度height来控制绝对定位。
    <TABLE style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 0px" height=500 cellSpacing=0 cellPadding=0 width=1008 align=center border=0>
    <TBODY>
    <TR>
    <TD width="100%">...</TD></TR></TBODY></TABLE>

  • 2、设置两组或者多组绝对定位在<TD>标签内的绝对定位代码

    <TABLE cellSpacing=0 cellPadding=0 width=1000 align=center border=0>
    <TBODY>
    <TR>
    <TD style="LEFT: 200px; WIDTH: 300px; POSITION: absolute; TOP: 30px; HEIGHT: 300px">
    <IMG height=200 src="图片地址" width=200> </TD></TR>
    <TR>
    <TD style="LEFT: 150px; WIDTH: 300px; POSITION: absolute; TOP: 20px; HEIGHT: 300px">
    <IMG height=300 src="边框图片地址" width=300> </TD></TR></TBODY></TABLE>

  • (这样做的重要性在与能够正确的插入图片代码<IMG height=200 src="图片地址" width=200>来缩放图片的大小,不像在<TABLE>或者<TD>标签内添加背景background="背景图片地址"要好的多,因为背景图片是平铺,不规则的图片很难在背景的前提下控制大小。)或者把绝对定位代码直接添加在图片代码中来控制。

 

九、相对和绝对定位控制图片边框和图片叠加+flash
HTML代码:

 

HTML基本代码:

<TABLE style="LEFT: -120px; WIDTH: 800px; POSITION: relative; TOP: 0px" height=800 cellSpacing=0 cellPadding=0 width=808 align=center border=0>
<TBODY>
<TR>
<TD width=800>
<TABLE cellSpacing=0 cellPadding=0 width=800 align=center border=0>
<TBODY>
<TR>
<TD style="LEFT: 100px; WIDTH: 800px; POSITION: absolute; TOP: 100px; HEIGHT: 800px"><IMG height=600 src="边框图片地址" width=800> </TD></TR>
<TR>
<TD style="LEFT: 100px; WIDTH: 800px; POSITION: absolute; TOP: 300px; HEIGHT: 600px"><IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 800px; HEIGHT: 424px" height=424 src="图片地址" width=800>
<EMBED style="LEFT: 100px; WIDTH: 600px; POSITION: absolute; TOP: 40px; HEIGHT: 424px" align=right src=flash地址 type=application/x-shockwave-flash allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"></TD></TR>
</TBODY></TABLE></TD></TR></TBODY></TABLE>

 

HTML实例代码:

<TABLE style="LEFT: -120px; WIDTH: 800px; POSITION: relative; TOP: 0px" height=800 cellSpacing=0 cellPadding=0 width=808 align=center border=0>
<TBODY>
<TR>
<TD width=800>
<TABLE cellSpacing=0 cellPadding=0 width=800 align=center border=0>
<TBODY>
<TR>
<TD style="LEFT: 100px; WIDTH: 800px; POSITION: absolute; TOP: 0px; HEIGHT: 800px"><IMG height=600 src="http://img229.ph.126.net/bjnAdpLDsDWEhf36c_foLg==/1470143803359758189.gif" width=800> </TD></TR>
<TR>
<TD style="LEFT: 100px; WIDTH: 800px; POSITION: absolute; TOP: 150px; HEIGHT: 600px"><IMG style="FILTER: Alpha(opacity=100,style=2); WIDTH: 800px; HEIGHT: 424px" height=424 src="http://img.ph.126.net/sokKicjD3TPz9VG4mQAdhg==/3719128867278134091.jpg" width=800> <EMBED style="LEFT: 100px; WIDTH: 600px; POSITION: absolute; TOP: 10px; HEIGHT: 424px" align=right src=http://s2photo.cn21edu.com/UpLoadImage/yyfq/image/ArticleFlash/2b39a3b9-35fb-4730-961e-1bf270f40db8.swf type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

HTML代码示例: 

 

如何给自己的图片加上精美边框图片(续篇二) - qy-0824 - 启野的博客

如何给自己的图片加上精美边框图片(续篇二) - qy-0824 - 启野的博客

HTML代码详解:

 

原理同上例,添加了flash绝对定位
<EMBED style="LEFT: 100px; WIDTH: 600px; POSITION: absolute; TOP: 10px; HEIGHT: 424px" align=right src=flash地址 type=application/x-shockwave-flash wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal">

欢迎光临启野博客!
  评论这张
 
阅读(1033)| 评论(1)
推荐 转载

历史上的今天

评论

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

页脚

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