大图代码个人日记

大图代码

个人日记

　HTML学习编辑小平台－克隆代码做音画贴

〓游子制作〓　　　开编话：音画贴是用英文编写成的代码文本，像我这样年近八十的老人，又不懂英文，根本就是没办法做．好在HTML是一种标签语言，只要对标签的属性内容和属值有所理解，就可以采取复制套用的方法来编辑音画贴．因此，将常用的一些HTML标签代码和素材资料集放在此备用．这是最简单的代码学习和编辑小平台．是套用代码做贴的笨方法，或许也是一种独创．新手启步学代码，可以在这里＂即学即用，立马见效＂．做法是：复制要用的代码，粘贴到下面HTML编辑浏览器，修改标签内容的属值，例如文字或图片地址等对象内容即可．　这些资料是本人的学习心得，错误之处，请大家指正．－原创编辑：游子（广东省汕头市一个老游击队员）　〓欢迎指导〓

学习HTML代码做音画贴的体会－供初学者参考：

∣依样画葫芦试做音画贴∣ 一周学会用代码做音画贴∣ 欢迎您！启步学代码∣ html代码编辑浏览器∣
各种常用HTML标签实用代码　　　　

（一）全屏及图框代码：

◆１．全屏（相对定位）代码：
<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">

</DIV><br><br>

◆２颜色背景图框代码．
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 bgColor="图框背景颜色代码" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>

◆3图片背景的图框代码．
<TABLE borderColor="边框颜色代码" cellSpacing=15 cellpadding=20 background="背景图片地址" width="图框宽度" height="图框高度" border=20>
<TR><<TD>
</TD></TR></TABLE>

（二）文字设置代码：

　
◆１．文字设置基本代码：
<font face=黑体 size=4 color=red>插入文字内容</font>

◆２．大号文字设置代码：
<font face=黑体 style=font:50pt color=red>插入文字内容</font>

◆３．文字的边外加光辉效果代码：
<div style="FILTER: Glow(color=#0000ff,strength=12); HEIGHT: 6pt"> <FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00"> 如画江山</FONT></div>

◆４．文字重叠效果代码：
<DIV style="FILTER: shadow(color=#00ff00, strength=5); WIDTH: 600px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 50pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#808000> 期待您的精采！ </FONT></DIV>

◆５．文字重叠效果代码：
<DIV style="FILTER: shadow(color=#000000, strength=5); WIDTH: 700px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文行楷 color=#ff0000> 春风秋雨 </FONT></DIV>

◆５．文字有颜色背景的代码：
<font STYLE="background-color:#0000ff" font face=黑体 style="FONT-SIZE: 22pt; color=#FFECEC"><b> 〖文字有颜色背景的代码〗</font></b>

（三）文字竖排代码：

◆１．文字靠左竖排代码：
<p> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>

◆２．文字居中竖排代码：
<p align=CENTER> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>

◆２．文字靠右竖排代码：
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff> 更喜岷山千里雪，<br> 三军过后尽开颜。<br> ．．．．．<br> </FONT></P>

（四）各种贴图代码：

　　◆１．贴图代码1：
<img src="图片地址">

　　◆２．贴图代码2：
<INPUT src="图片地址" type=image width=500>

　　◆３．羽化图片代码：
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>

　　◆４．贴Flash代码：
<EMBED align=right src=http://www2.upwebflash.cn/index276-img/clock30.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;>

　　◆５．图片加Flash代码：
<TABLE cellSpacing=1 cellPadding=0 width=500 height=330 bordercolor=#BB5E00 background="图片地址" border=3> <TR> <TD>
<EMBED align=center src="Flash文件地址" width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;> </TD></TR></TABLE>
　　◆５．绝对定位加叠Flash代码：
<EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 100px; HEIGHT: 300px" align=center src=http://www2.upwebflash.cn/index276-img/clock30.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent">

（五）定位标签代码：

２０．定位标签代码：

<CENTER>内容居中</CENTER>
<DIV align=center> 内容居中</DIV>
<p align=CENTE>内容居中</P>
<p align=LEFT>内容居左</P>
<p align=RIGHT>内容居右</P>

　　水平加竖直定位指令语句（放在表格的列标签内）：
<td align=LEFT valign=top>居左靠顶</td>
<td align=center valign=top>居中靠顶</td>
<td align=right valign=top>居右靠顶</td>
<td align=LEFT valign=bottom>居左靠底</td>
<td align=center valign=bottom>居中靠底</td>
<td align=right valign=bottom>居右靠底</td>

（六）趣味的移动标签代码：

　　◆１，默然从右向左移动代码：
<marquee>移动内容文字或图片</marquee>

　　◆２，从右向左移动代码：
<marquee scrollamount=3 direction=left>移动内容文字或图片</marquee>

　　◆３，从左向右移动的代码：
<MARQUEE scrollAmount=3 direction=right>移动内容文字或图片lt;/marquee>

　　◆４，左右来回走的代码：
<marquee scrollamount=8 behavior=alternate >动内容文字或图片</marquee>

　　◆５．从下向上移动的代码：
<marquee scrollamount=1 direction=up >移动内容文字或图片</marquee>

　　◆６．从下向上从上向下移动的代码：
<marquee scrollamount=1 direction=down>移动内容文字或图片</marquee>

（七）歌曲播放代码：

　　◆１．银色播放器代码：
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">

　　◆２．图框加入歌词﹑图片和播放器代码：
<table border="1" width="500" background="http://www.luopan.com/uploads/landmark/21241.jpg" height="400" id="table1">
<tr>
<td align=center valign=bottom><br>
<font color="#ffff00" size="6"><b>《歌曲名称》</b></font><br>
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/200861116182112553.jpg" type=image width=300> <br>
<marquee direction=left scrollamount=2 width=400>
<font size="4"color="#00FFFF"><<b>歌词内容。</b></font>
</marquee>
<EMBED src=http://www.joyvv.com/images/3574.mp3 width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">
</td><</tr></table>

　　◆3．播放动漫歌曲代码：
<TABLE cellSpacing=5 cellPadding=1 width=500 align=center bordercolor=#C0C0C0 background=http://sucai.heima.com/sucai/news/bg/06.gif border=30 table> <tr>
<td><br>
<P align=center><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://image2.sina.com.cn/dongman/f/2002-03-18/1_55-4-248_20020318123358.swf width=500 height=350 type=application/x-shockwave-flash quality="high" wmode="transparent"></P>
</td><</tr></table>

（八）绝对定位挂贴实用标签代码：

　　◆１．相对定位代码：
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 200px; ridge:">
</DIV>

　　◆2．绝对定位代码：
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: absolute; TOP: 0px; HEIGHT: 100px" >
</DIV>

　　◆３．绝对定位挂贴图片代码：
<img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg"width=250 style="LEFT: 260px; WIDTH: 250px; POSITION: absolute; TOP: 130px; HEIGHT: 320px">

　　◆４．绝对定位挂贴羽化图片代码：
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" type=image width=400 style="LEFT: 480px; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 320px">

　　◆５．绝对定位挂贴横排文字代码：
<font face=黑体 style=font:30pt color=ffff00 style="LEFT: 600px; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 30px"> 挂贴横排文字</font>

　　◆６．绝对定位挂贴竖排文字代码：
<font face=黑体 style=font:30pt color=ffff00 style="LEFT: 680px; WIDTH: 50px; POSITION: absolute; TOP: 170px; HEIGHT: 320px"> 挂贴竖排文字</font>

　　◆７．绝对定位挂贴Flash代码：
<EMBED style="LEFT:50px; WIDTH: 950px; POSITION: absolute; TOP: -130px; HEIGHT: 400px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=950 height=400 type=application/octet-stream ;; quality="high" wmode="transparent">

　　◆8．绝对定位挂贴从下向上移动代码：
<marquee scrollamount=1 direction=up style="LEFT: 600px; WIDTH: 300px; POSITION: absolute; TOP: 100px; HEIGHT: 130px">移动内容文字或图片</marquee>

（九）．超链接标签代码：

　　◆1．超链接代码：
<a HREF="http://bbs.zj60.com/Index.asp"target=_blank><font size=3 color=#0000ff> 常青论坛 </FONT></a>

　　◆2．超链接代码：
<a HREF="http://bbs.zj60.com/Index.asp"target=_blank><img src="http://bbs.gw.com.cn/UploadFile/2008-8/2008841933482109.gif"width=100><br><font size=3 color=#0000ff>　常青论坛．</FONT></a>

　　◆3．直接运行空间贴代码：
<DIV style="LEFT: 50px; WIDTH: 995px; POSITION: relative; TOP: 0px"> <IFRAME marginWidth=0 marginHeight=0 src="http://bbs.zj60.com/Index.asp" frameBorder=0 width=995 scrolling=no height="12500"> </IFRAME></DIV>

（十）其它常用标签代码及语句：

<BR>　过行单标签．　　<p></p> 过段双标签．　<pre></pre>文字依原始样式显示双标签　

 　半个空格　 一个空格．　　<li></li>文字行首加一个圆点标签．

<CENTER> <HR SIZE=2 color=#ffff00 ALIGN=CENTER WIDTH="500"> </CENTER>横线标签．

◆常用字体代码：
宋体　黑体　幼圆　隶书　新宋体　华文新魏　华文行楷　　华文细黑

华文彩云　　方正姚体　　楷体_GB2312　　仿宋_GB2312

◆常用颜色代码：
红色　#FF0000　蓝色 #0000FF　黄色 #FFFF00　青色 #00FFFF　黑色 #000000

红紫色 #FF00FF　茶色 #D2B48C　金色 #FFD700　橄榄色 #808000

◆常用颜色代码◆　

红色
#FF0000 黄色
#FFFF00 暗青色
#008B8B 碧绿色
#7FFFD4 白色
#FFFFFF 蓝色
#0000FF 紫罗兰
#8A2BE2 褐色
#A52A2A 黑色
#000000 黄绿色
#7FFF00

巧可力
#D2691E 珊瑚色
#FF7F50 菊兰色
#6495ED 暗深红
#DC143C 青色
#00FFFF 暗金黄
#B8860B 暗灰色
#A9A9A9 暗绿色
#006400 桃色
#FFDAB9 暗红色
#8B008B

红紫色
#FF00FF 暗灰蓝
#483D8B 墨绿色
#2F4F4F 亮肉色
#FFA07A 米绸色
#FFF8DC 粟色
#800000 橙色
#FFA500 热粉红
#FF69B4 金色
#FFD700 茶色
#D2B48C

击点：更多的颜色代码.

编辑音画贴各种素材

◇黑马图片素材资源　◇七色图片素材资源　◇玫瑰图片素材资源　　◇智慧淡雅漂亮背景素材

◇智慧漂亮相框素材　◇忆石漂亮相框素材　◇中国专业素材图库　　◇中华三合一边框素材

◆编辑音画贴的各种代码实例◆

1-颜色背景图框

　
<br> <br> <DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px"> <TABLE borderColor=660000 cellSpacing=15 cellpadding=20 bgColor=#FFEEDD width=920 height=300 border=20> <TR><TD> <CENTER> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" type=image width=400> <FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书> 这里贴标题文字</FONT> <br> <font face=黑体 size=5 color=0000ff>下面插入各种内容． </font><br> </CENTER></TD></TR></TABLE> </DIV><br><br><br>

2-图片背景的图框

　
<TABLE id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px" borderColor=660000 height=200 width=920 background=http://blog.lanyue.com/model/luntan/upload_pic/1355671.jpg border=22> <TR> <TD> <CENTER> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://sucai.heima.com/sucai/news/xhtp/24.jpg" type=image width=400> <FONT style="FONT-SIZE: 40pt; FILTER: shadow color=apar); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%" face=隶书> 这里贴标题文字</FONT> <br> <font face=黑体 size=5 color=0000ff>下面插入各种内容． </font><br> </TD></TR></TABLE><BR><BR><BR>

3-红色背景淡化的图框

　
<br><br> <DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 10px"> <table border="15" width="900" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="330"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff0000', endColorStr='#ffffff', gradientType='1')"> 　 </td></tr></table> </DIV><br><br><br>

4-三合一图框

　
<TABLE cellSpacing=0 cellPadding=0 width="850" height=192 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875591710577.jpg border=0> <TBODY><TR><TD></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=60 width="850" height=60 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875592977128.jpg border=0> <TBODY><TR><TD> <center><font face=华文行楷 size=6 color=ffff00>在这张图框插入所有内容．</font></center> .</TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width="850" height=189 align=center borderColorLight=#b18453 background=http://bbs.gw.com.cn/UploadFile/2008-7/200875594164088.jpg border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE>

103

5-10层图框代码

　
<BR><BR> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width=920 borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/200481313595718.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131404918.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=11 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813141196.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131407387.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=3 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/2004813135644130.jpg border=1> <TBODY><TR><TD> <TABLE cellSpacing=0 borderColorDark=#000000 cellPadding=15 width="100%" borderColorLight=#000000 background=http://bbs.nxnews.net/forum/UploadFile/2004-8/20048131407387.jpg border=1> <TBODY><TR><TD> 。。。。。。<BR> <P align=center><font style=font:30pt face=华文行楷 color=ffff00> 在此开始插入内容 </FONT></p> 。。。。。。<BR> <BR><BR> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE>

6--带滚动条文本框代码

　
<table align=center border=3 cellspacing=1 cellpadding=2 borderColor=#000666 width=500> <tr> <td bgcolor=#FAF4FF> <div style="overflow:auto;height:120;"> <br><P align=center><FONT face=仿宋_GB2312 color=#000666 size=4><B> <FONT size=5>如梦令李清照</FONT></p> 　　昨夜雨疏风骤。浓睡不消残酒。试问卷帘人，—却道“海棠依旧”。知否？知否？应是绿肥红瘦！<br> <br><br> 　　一篇小令，才共六句，好似一幅图画，并且还有对话，并且还交代了事情的来龙去脉，—这可能是现代的电影艺术才能胜任的一种“镜头”表现法，然而它却实实在在是九百前的一位女词人自编自演的作品，不谓之奇迹，又将谓之何哉？<br> 　　　　　　　　　　　　　（周汝昌）<br><br> </div></td></tr></table>

104

7-图片加Flash和文字

　
<TABLE cellSpacing=1 cellPadding=0 width=500 height=330 bordercolor=#BB5E00 background=http://photo.southcn.com/upload/F202922004.11.4.22.22.330.jpg border=3> <TR> <TD> <br> <CENTER> <font style=font:25pt face=隶书 color=#00ffff>新疆哈塔斯</font></CENTER> <EMBED align=right src=http://imgfree.21cn.com/free/flash/4.swf width=500 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;> </TD></TR></TABLE>

8-网页上绝对定位贴Flash

　
<EMBED style="LEFT: 50; WIDTH: 800px; POSITION: absolute; TOP: 25; HEIGHT: 600px" align=center src=http://imgfree.21cn.com/free/flash/113.swf type=application/octet-stream wmode="transparent" quality="high" ;;>

105

９-单元格定位内容居中

　
<table id=table1 style="LEFT: 200px; WIDTH: 520px; POSITION: relative; TOP: 0px" border="3" cellspacing="1" height="350"bordercolor="#ff0000"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff', gradientType='1')"> <font style="LEFT: 480px; WIDTH: 30px; POSITION: absolute; TOP: 10px" style=font:12pt face=宋体 color=0000ff><b> 毛主席诗词欣赏</b></FONT></DIV> <font style="LEFT: 430px; WIDTH: 30px; POSITION: absolute; TOP: 25px" style=font:22pt face=隶书 color=ff0000> ︻<br>采桑子<br>︼重阳</FONT></DIV> <DIV style="LEFT: 400px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=300> </DIV> <font style="LEFT: 350px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 人生易老天难老<br>，岁岁重阳<br>。</b></FONT></DIV> <DIV style="LEFT: 330px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=300> </div> <font style="LEFT: 280px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 今又重阳<br>，战地黄花分外香<br>。</b></FONT></DIV> <DIV style="LEFT: 260px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=300> </div> <font style="LEFT: 210px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 一年一度秋风劲<br>，不似春光<br>。</b></FONT></DIV> <DIV style="LEFT: 190px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=300> </div> <font style="LEFT: 140px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 胜似春光<br>，寥廓江天万里霜<br>。</b></FONT></DIV> <DIV style="LEFT: 120px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=300> </div> <font style="LEFT: 20px; WIDTH: 30px; POSITION: absolute; TOP: 180px" style=font:12pt face=宋体 color=0000ff><b> 游子学编竖排文字</b></FONT></DIV> </td></tr></table>

１０-图片加立体边框代码

　
<center> <img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=450 style="border:22px #fbd44c ridge" )> </CENTER>

106

１１-立体阴影框代码

　
<table width=400 height=400 border=2 cellpadding="15" cellspacing="3" style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"> <tr><td bgcolor="#ffffff" align=center valign=middle> <img src="http://photo4.hexun.com/p/2006/1227/65682/b_FB62298B118B3138C93268EEC6F09B98.jpg"> </td></tr></table></center>

１２-图片左右颠倒实例代码

　
<INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"type=image width=250 style="filter:fliph"> <INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg"type=image width=250 style="fliph:filter">

107

１３-粒状阴影边框代码

　
<CENTER><img src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" width=400 style="filter:progid:DXImageTransform.Microsoft.Glow(color=#8600FF,strength=30)"></CENTER>

１４-简单的音乐试听播放器

　
<CENTER> <font style="FONT-SIZE: 18pt" face=黑体 color=ff0000><b> 简单的音乐试听播放器</b></font> <TABLE cellSpacing=4 cellPadding=4 width=300 border=2 bgcolor="#FFFF00"> <TR> <TD align="center" colSpan=2> <EMBED id=myPlayer src=http://sucai.heima.com/sucai/news/a13.mid width=300 height=50 type=audio/mpeg AutoStart="-1" EnableContextMenu="-1" PlayCount="5" ShowControls="-1" ShowStatusBar="-1" ShowDisplay="0"> </TD></TR> <TR><TD><a href="http://.mp3">01、爱拼才会蠃</A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/a13.mid">试听</a></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/j13.mid">02、京华春梦 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/j13.mid">试听</a></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/t8.mid">03、听松 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/t8.mid">试听</a></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/j5.mid">04、江南春早</A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/j5.mid">试听</A></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/h6.mid">05、化蝶 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/h6.mid">试听</A></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/n1.mid">06、南都夜曲 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/n1.mid">试听</A></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/t4.mid">07、泰坦尼克 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/t4.mid">试听</A></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/q1.mid">08、祈祷 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/q1.mid">试听</A></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/l1.mid">09、拉德夫斯基进行曲 </A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/l1.mid">试听</A></TD> </TR> <TR><TD><a href="http://sucai.heima.com/sucai/news/j12.mid">10、京调--苏三起解</A></TD> <TD align=center><a href="#2" onclick=myPlayer.FileName=this.value value="http://sucai.heima.com/sucai/news/j12.mid">试听</A></TD> </TR> </TABLE> </CENTER>

108

１５-文字边外加光辉效果代码

　
<CENTER> <DIV style="FONT-SIZE: 25pt; FILTER: glow(color=000066); WIDTH: 100%; COLOR: #00ff00; LINE-HEIGHT: 150%"><B><FONT face=隶书>七律　长征(1935.10)<BR>红军不怕远征难，万水千山只等闲。<BR>五岭逶迤腾细浪，乌蒙磅礴走泥丸。<BR>金沙水拍云崖暖，大渡桥横铁索寒。<BR>更喜岷山千里雪，三军过后尽开颜。<BR></FONT></B></DIV></CENTER>

１６-文字阴影果代码２

　
<CENTER> <DIV style="FONT-SIZE: 100pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 150%"> <FONT style="FONT-FAMILY: 华文行楷"> 网络世界 </DIV></CENTER>

108

１７-文字阴影效果代码4

　
<CENTER> <FONT style="FONT-SIZE:80pt; FILTER: shadow(color=black, strength=15); WIDTH: 100%";FONT face=华文彩云 color=00ff00><B> 春风秋雨</B></FONT></CENTER>

１８-文字阴影果代码

　
<CENTER> <DIV style="FONT-SIZE: 22pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #f8f1c7; LINE-HEIGHT: 150%; FONT-FAMILY: 华文正楷"><B> 七律　长征(1935.10)<BR>红军不怕远征难，万水千山只等闲。<BR>五岭逶迤腾细浪，乌蒙磅礴走泥丸。<BR>金沙水拍云崖暖，大渡桥横铁索寒。<BR>更喜岷山千里雪，三军过后尽开颜。 </B></DIV></CENTER>

108

１９-靠右插入竖排文字

　
<DIV ALIGN=RIGHT> <table border="1" width="150" cellspacing="1" height="250" id="table2"> <tr> <td>　 <DIV style="WRITING-MODE: tb-rl;LINE-HEIGHT: 5.em; LETTER-SPACING: 0.2em;"> <font face=仿宋_GB2312 style=font:16pt color=#0000FF><b> 　<br> 《题临安驿》<br> －林升<br> 山外青山楼外楼，<br> 西湖歌舞几时休。<br> 暖风熏得游人醉，<br> 直把杭州作卞州。<br> 　<br> </font></div> </td></tr></table> </DIV>

２０-绝对定位挂贴竖排文字1

　
<table id=table1 style="LEFT: 200px; WIDTH: 520px; POSITION: relative; TOP: 0px" border="3" cellspacing="1" height="350"bordercolor="#ff0000"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff', gradientType='1')"> <font style="LEFT: 480px; WIDTH: 30px; POSITION: absolute; TOP: 10px" style=font:12pt face=宋体 color=0000ff><b> 毛主席诗词欣赏</b></FONT></DIV> <font style="LEFT: 430px; WIDTH: 30px; POSITION: absolute; TOP: 25px" style=font:22pt face=隶书 color=ff0000> ︻<br>采桑子<br>︼重阳</FONT></DIV> <DIV style="LEFT: 400px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </DIV> <font style="LEFT: 350px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 人生易老天难老<br>，岁岁重阳<br>。</b></FONT></DIV> <DIV style="LEFT: 330px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 280px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 今又重阳<br>，战地黄花分外香<br>。</b></FONT></DIV> <DIV style="LEFT: 260px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 210px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 一年一度秋风劲<br>，不似春光<br>。</b></FONT></DIV> <DIV style="LEFT: 190px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 140px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 胜似春光<br>，寥廓江天万里霜<br>。</b></FONT></DIV> <DIV style="LEFT: 120px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 20px; WIDTH: 30px; POSITION: absolute; TOP: 180px" style=font:12pt face=宋体 color=0000ff><b> 游子学编竖排文字</b></FONT></DIV> </td></tr></table>

108

２１-绝对定位挂贴竖排文字2

　
<table id=table1 style="LEFT: 100px; WIDTH: 620px; POSITION: relative; TOP: 0px" height="350"> <td>　 <td>　 <table border="25" width=600" cellspacing="3" cellpadding="0" bgcolor="#FF3399" height="350" bordercolor="#000666"> <tr> <td> <DIV id=table1 style="LEFT: 0px; WIDTH: 600px; POSITION: relative; TOP: 0px"> <font style=font:22pt face=隶书 color=#FFFF37> <DIV style="LEFT: 550px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 毛主席诗词欣赏</DIV> <DIV style="LEFT: 500px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > ︻<br>采桑子<br>︼重阳</DIV> <DIV style="LEFT: 450px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 人生易老天难老<br>，</DIV> <DIV style="LEFT: 400px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 岁岁重阳<br>。</DIV> <DIV style="LEFT: 350px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 今又重阳<br>，</DIV> <DIV style="LEFT: 300px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 战地黄花分外香<br>。</DIV> <DIV style="LEFT: 250px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 一年一度秋风劲<br>，</DIV> <DIV style="LEFT: 200px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 不似春光<br>。</DIV> <DIV style="LEFT: 150px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 胜似春光<br>，</DIV> <DIV style="LEFT: 100px; WIDTH: 30px; POSITION: absolute; TOP: -130px" > 寥廓江天万里霜<br>。</DIV> </font> <DIV style="LEFT: 30px; WIDTH: 30px; POSITION: absolute; TOP: -50px" > <font style=font:15pt color=#FFFF37><b> 游子学编竖排文字</b></font></DIV> </DIV> </td></tr></table> </td></tr></table>

２２-绝对定位挂贴竖排文字代码模块

<table id=table1 style="LEFT: 100px; WIDTH: 720px; POSITION: relative; TOP: 0px" border="3" cellspacing="1" height="350"bordercolor="#ff0000"> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#00ff00', endColorStr='#ffffff', gradientType='1')"> <font style="LEFT: 680px; WIDTH: 30px; POSITION: absolute; TOP: 10px" style=font:12pt face=宋体 color=0000ff><b> 毛主席诗词欣赏</b></FONT></DIV> <font style="LEFT: 630px; WIDTH: 30px; POSITION: absolute; TOP: 25px" style=font:22pt face=隶书 color=ff0000> ︻<br>采桑子<br>︼重阳</FONT></DIV> <DIV style="LEFT: 600px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </DIV> <font style="LEFT: 550px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 人生易老天难老<br>，岁岁重阳<br>。</b></FONT></DIV> <DIV style="LEFT: 530px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 480px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 今又重阳<br>，战地黄花分外香<br>。</b></FONT></DIV> <DIV style="LEFT: 460px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 410px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 一年一度秋风劲<br>，不似春光<br>。</b></FONT></DIV> <DIV style="LEFT: 390px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 340px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> 胜似春光<br>，寥廓江天万里霜<br>。</b></FONT></DIV> <DIV style="LEFT: 320px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 270px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> <br>，<br>。</b></FONT></DIV> <DIV style="LEFT: 250px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 200px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> <br>，<br>。</b></FONT></DIV> <DIV style="LEFT: 180px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 130px; WIDTH: 3px; POSITION: absolute; TOP: 25px" style=font:16pt face=新宋体 color=0000ff><b> <br>，<br>。</b></FONT></DIV> <DIV style="LEFT: 110px; WIDTH: 3px; POSITION: absolute; TOP: -240px"> <INPUT src="http://sucai.heima.com/sucai/news/j/32.gif" type=image width=2 height=800> </div> <font style="LEFT: 20px; WIDTH: 30px; POSITION: absolute; TOP: 180px" style=font:12pt face=宋体 color=0000ff><b> 游子学编竖排文字</b></FONT></DIV> </td></tr></table>

108

２３-文字从下向上移动的代码

<center>　 <MARQUEE scrollAmount=1 direction=up width=350 height=150> <font face=华文行楷 size=5 color=000666><b> 　　　《梅花落》<BR> 隆冬十二月，寒风西北吹。<BR> 独有梅花落，飘荡不依枝。<BR> 留恋逐霜彩，漫步下冰斯。<BR> 何当与春日，共映芙蓉词。 </b></FONT></MARQUEE> </center>

２４-整张页面来回移动的代码

　
<MARQUEE scrollAmount=3 behavior=alternate width="100%"> <table border="15" width="560" cellspacing="5" cellpadding="5" bgcolor="#FFFF00" bordercolor="#800000" id="table1" height="300"> <tbody> <tr> <td style="filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#00ff00', gradientType='1')"> 　 <DIV align=center valign=top> <MARQUEE behavior=alternate><B><FONT face=宋体 color=#9932CC size=5> <MARQUEE direction=up behavior=alternate width=30 height=40>网<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=80 height=70>络<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=50 height=40>世<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=50>界<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=65>欢<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=80>迎<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=50 height=70>大<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=40 height=60>家<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=30 height=50>光<BR></MARQUEE> <MARQUEE direction=up behavior=alternate width=60 height=60>临<BR></MARQUEE> </FONT></B></MARQUEE> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://www.nmg.xinhuanet.com/xwzx/2006-11/14/xin_381103141622703191698.jpg" type=image width=160> </DIV> </td></tr></tbody></table></MARQUEE>

２５-图片文字走四方的代码

　
<TABLE borderColor=fff000 height=350 cellSpacing=3 cellPadding=10 bgColor=#0000ff width=450 border=3> <TBODY> <TR> <TD> <MARQUEE scrollAmount=4 direction=down behavior=alternate height=350> <MARQUEE scrollAmount=4 behavior=alternate width=450> <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFace/519242_200621410461352612.gif" type=image width=150><br><FONT color=fff000 size=4><B>走四方</B></FONT> </MARQUEE></MARQUEE> </TD></TR></TBODY></TABLE>

２６-斜着移动合并的代码

　
<table border="1" width="800" height="400" bgcolor="#6495ED"> <tr> <td width="400" height="400"> <marquee scrollamount="5" direction="up" width="400" height="400"> <marquee scrollamount="5"direction="right" width="100%"height="30" > <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/200861116215857132.jpg" type=image width=150 height="150"> </marquee></marquee> </td> <td width="400" height="400"> <marquee scrollamount="5" direction="up" width="400" height="400"> <marquee scrollamount="5"direction="left" width="100%"height="30" > <INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="http://bbs.gw.com.cn/UploadFile/2008-6/200861116215857132.jpg" type=image width=150 height="150"> </marquee></marquee> </td></tr></table>

２７-绝对定位挂贴Flash

　
<DIV id=table1 style="LEFT: 20px; WIDTH: 800px; POSITION: relative; TOP: 40px"> <TABLE borderColor=#127626 height=500 cellSpacing=0 cellPadding=0 width=700 background="http://hiphotos.baidu.com/dudu奶奶知道/pic/item/2baafd23e2c8055d9822ed3a.jpg" border=3> <TR> <TD> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: -60px; HEIGHT: 500px" align=center src=http://imgfree.21cn.com/free/flash/59.swf width=750 height=500 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT:10px; WIDTH: 750px; POSITION: absolute; TOP: 340px; HEIGHT: 200px" align=center src=http://www.easelq.cn/wode/flash/dongwu/lumi.swf width=750 height=300 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TABLE></DIV>

２８-绝对定位相片加叠相框

　
<DIV style="LEFT: 0px; WIDTH: 500px; POSITION: relative; TOP: 0px; HEIGHT: 500px; ridge:"> <INPUT style="LEFT: 130px; WIDTH: 220px; POSITION: absolute; TOP: 110px; HEIGHT: 320px" type=image width=220 src="http://bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg" ><br></INPUT> <br> <INPUT style="LEFT: -20px; WIDTH: 500px; POSITION: absolute; TOP: -20px; HEIGHT: 550px" type=image height=1 width=500 src="http://bbs.gw.com.cn/UploadFile/2008-2/200821614421933537.gif"></INPUT> <br> </DIV>

２９-羽化图片绝对定位加叠文字、图片和Flash<

文章评论

空间小站
© All rights reserved.