|
博文简介 |
上一篇主要介绍了在边框里加图片并带移动和水波纹效果,这篇主要突出精美的边框里加自动唱歌的小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代码示例: |
|
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代码示例: |
|
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">
|
|
评论