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

（一）全屏及图框代码（二）文字设置代码

（三）文字竖排代码（四）各种贴图代码

（五）定位标签代码（六）趣味的移动标签代码

（七）多媒体设置（贴歌）标签代码（八）绝对定位挂贴实用标签代码

（九）．超链接标签代码（十）其它常用标签代码及语句

（十一）编辑音画贴各种素材（十二）编辑音画贴的各种代码实例

（十三）图框和贴图代码实例（十四）各种特效文字代码实例

（一）全屏及图框代码：

◆１．全屏（相对定位）代码：

<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">

</DIV><br><br>

◆２颜色背景图框代码．

<TABLE style="LEFT: -0px; WIDTH: 980px; POSITION: relative; TOP: 20px" borderColor="0000ff" cellSpacing=10 cellpadding=10 bgColor="ffff00" border=10> <TR><<TD height=400>

可以在这里开始插入内容

</TD></TR></TABLE>

◆3图片背景的图框代码．

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

<TR><<TD>

</TD></TR></TABLE>

◆4套用全屏代码的颜色背景的图框．

<TABLE style="LEFT: -0px; WIDTH: 980px; POSITION: relative; TOP: 20px" borderColor="0000ff" cellSpacing=10 cellpadding=10 bgColor="ffff00" border=10> <TR><<TD height=400>

可以在这里开始插入内容

</TD></TR></TABLE>

◆5套用全屏代码的图片背景的图框．

<TABLE id=table1 style="LEFT: 0px; WIDTH: 980px; POSITION: relative; TOP: 20px "height=400 borderColor=660000 background=http://image11.360doc.com/DownloadImg/2010/06/2410/3727689_1.jpg border=20>

<TR><<TD>

可以在这里开始插入内容

</TD></TR></TABLE>

◆6强制宽度的表格标签代码．

<TABLE cellpadding=20 style="WIDTH: 500px; BORDER-COLLAPSE: collapse; HEIGHT: 300px"bgColor="#FFE6FF" borderColor="0000ff" border=10>

<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=#000000,strength=6); 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="//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://image11.360doc.com/DownloadImg/2010/06/2410/3727689_2.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="//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="//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://www.53199.com/bbs/UploadFile/2008-11/200811296112198358.txt"target=_blank><font size=3 color=#0000ff> 欢迎您！启步学代码。 </FONT></a>

◆2．超链接代码：

<a HREF="http://www.53199.com/bbs/UploadFile/2008-12/200812714195372899.txt"target=_blank><img src="//bbs.gw.com.cn/UploadFile/2008-8/2008841933482109.gif"width=100><br><font size=3 color=#0000ff>　一周学会用代码做音画贴．</FONT></a>

◆3．直接运行空间贴代码：

<DIV style="LEFT: 0px; WIDTH: 995px; POSITION: relative; TOP: 0px"> <IFRAME marginWidth=0 marginHeight=0 src="//www.53199.com/bbs/UploadFile/2009-4/200941913483155358.txt" frameBorder=0 width=995 scrolling=no height="11800"> </IFRAME></DIV>

◆4．精彩的链接文字说明设置代码，用于空间贴；

<style type="text/css"> .css1{font-family:楷体_GB2312; color:008000;font-size:16pt; font-weight:bold; text-decoration:none} .css2{font-family:楷体_GB2312; color:#0000ff;font-size:18pt; font-weight:bold ; text-decoration:none} .css3{font-family:隶书; color:#FF0000;font-size:22pt; font-weight:bold ; text-decoration:none} </style>

<a href="http://www.53199.com/bbs/UploadFile/2008-11/200811296112198358.txt"class="css1"> 欢迎您！启步学代码。</a>

<a href="http://www.53199.com/bbs/UploadFile/2008-12/200812714195372899.txt"class="css2"> 一周学会用代码做音画贴</a>

<a href="http://www.53199.com/bbs/UploadFile/2009-4/200941913483155358.txt"class="css3"> 依样画葫芦　试做音画贴</a>

复制代码粘贴到HTML编辑浏览器，可以运行见效果．

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

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

&nbsp;　半个空格　&nbsp;一个空格．　　<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