┈━═╬HTML代码音画中级全部教程╬═━┈HTML教程

┈━═╬HTML代码音画中级全部教程╬═━┈

HTML教程

《带刺的玫瑰》《LOVE佳》欢迎宝贝们来学习

由于墨梅老师中断教程传授以后，很多人就自创代码

因而中级音画代码就出现了多种板本

我们本着推陈出新和发扬光大的精神，将这些代码进行了淘汰精选

把那些有创意有价值的代码收录其中，供大家选择、结合使用

欢迎朋友们来学习、交流、转载，转载的朋友请做个

中华民族的传统美德道德的转载者

为了尊重原创人的劳动成果

请务必用转载方式取得代码，如果使用复制和变相复制

不仅令人鄙视，也会遭受自己良心的谴责

强烈鄙视白拿别人劳动成果，没礼貌的朋友！！！

好的东西我愿与大家一起分享，不要做自私自利的小人

祝宝贝友们学习愉快！天天更上一层楼！

&:教程来源墨梅冷阁 ?:编制带刺的玫瑰 LOVE佳

中级教程《一》音乐贴图变化效果

原代码：

<TBODY>

<TR>

变异代码

中级教程《二》代码组图

原代码：

<TABLE style="WIDTH: 230px; HEIGHT: 264px" height=264 cellSpacing=6 borderColorDark=#3e2500

width=230 align=left bgColor=#643c00 borderColorLight=#00000 border=0>
<TBODY>
<TR>
<TD>
<P align=center><IMG height=250 alt=图片 src="左边的图地址放进来"

width=435 appendurl="1"></P></TD></TR></TBODY></TABLE></DIV>
<DIV align=center> </DIV>
<DIV align=center>这里可写字</DIV>
<DIV align=center>
<DIV align=left><IMG style="WIDTH: 366px; HEIGHT: 5px" height=5 alt=图片 src="分线图地址"

width=252 appendurl="1">      

          这里写字 </DIV>
<DIV align=left><IMG style="WIDTH: 366px; HEIGHT: 5px" height=5 alt=图片 src="分线图地址"

width=252 appendurl="1"></DIV>
<DIV align=center>这里写字 </DIV>
<P align=left><IMG style="WIDTH: 366px; HEIGHT: 5px" height=5 alt=图片 src="分线地址"

width=252 appendurl="1"></P>
<DIV align=center>这里写字 </DIV>
<P align=left><IMG style="WIDTH: 366px; HEIGHT: 5px" height=5 alt=图片 src="分线图地址"

width=252 appendurl="1"></P>
<DIV align=center> 这里写字    

   这里写字     

      </DIV>
<P align=left><IMG style="WIDTH: 366px; HEIGHT: 5px" height=5 alt=图片 src="分线图地址"

width=252 appendurl="1"></P>
<DIV align=center>    

      </DIV></DIV></DIV>

变异代码

<TABLE style="WIDTH: 230px; HEIGHT: 264px" height=264 cellSpacing=6 borderColorDark=#3e2500 width=230 align=left bgColor=#643c00 borderColorLight=#00000 border=0>
<TBODY>
<TR>
<TD>
<P align=center><IMG height=250 alt=图片 src="http://ctc.qzs.qq.com/qzone/qzfl/editor/assets/左边的图地址放进来" width=435 appendurl="1"></P></TD></TR></TBODY></TABLE>
<DIV></DIV>
<DIV>这里可写字和添加分线，进行自由组合，编辑方便，效果美妙。</DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV>这里也可以写字和添加分线</DIV>

中级教程《三》边框分解如何组合

原代码：

<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=80 cellPadding=80 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址);

BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted;

BORDER-BOTTOM-STYLE: dotted" borderColor=#7f6709

cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=15 cellPadding=15 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址);

BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted;

BORDER-BOTTOM-STYLE: dotted" borderColor=#7f6709

cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=10 cellPadding=10 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=1 cellPadding=1 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center><FONT face=华文行楷 color=#ffff00 size=7></FONT> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center> </P>
<P align=center>    </P></TD></TR></TBODY></TABLE></TD></TR>

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

</TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=2 cellPadding=2 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=8 cellPadding=8 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=1 cellPadding=1 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=5 cellPadding=5 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=1 cellPadding=1 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

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

</TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=1 cellPadding=1 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址);

BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted;

BORDER-LEFT-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=#c6c607

cellSpacing=1 cellPadding=1 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=5 cellPadding=5 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=1 cellPadding=1 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P>
<P> </P>
<P>  </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>
<P> </P></TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD> </TD></TR></TBODY></TABLE>
<TABLE style="BACKGROUND-IMAGE: url(地址)"

变异代码

1、图片虚线边框代码

2、图片加立体镜框的代码

<center><img src="图片地址"

style="border:25 outset #ff88ff"></center>

3、滚动条代码

原代码与变异代码相结合，制作出来的帖子是相当漂亮的，完美

中级教程《四》如何用图片编辑精美字体

原代码：

<P>
<TABLE style="BACKGROUND-IMAGE: url(动画闪图地址)"

cellSpacing=0 cellPadding=0 align=center table="table" tbody="tbody">
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE style="BACKGROUND-IMAGE: url(表面颜色图地址)"

align=center table="table" tbody="tbody">
<TBODY>
<TR>
<TD align=middle>
<P><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt;

LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT:

normal" face=楷体_gb2312 color=#336699><B>这里写入你喜欢的文字</B>

</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P></B></FONT>

效果图:

1、

带刺的玫瑰致谢朋友

2、

最美的祝福送给您

3、

LOVE佳祝福您

4、

带刺的玫瑰 LOVE佳

祝福宝贝们

5、

愿宝贝们学习愉快

6、

永远幸福平安

上面效果代码如下：

↓复制框内语法↓

代码：

<TABLE style="BACKGROUND-IMAGE: url(闪底素材)" borderColor=#ff0000 cellSpacing=12 cellPadding=12 width="65%" align=center bgColor=#ffffff border=5>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#ff0000)" align=middle>
<P><FONT style="FONT-SIZE: 30pt" face=隶书 color=#ff0000><B></B></FONT> </P>
<P><FONT style="FONT-SIZE: 30pt" face=隶书 color=#ff0000><B></B></FONT> </P>
<P><FONT style="FONT-SIZE: 30pt" face=隶书

color=#ff0000><B>带刺的玫瑰玫瑰 LOVE佳祝福您 </B></FONT></P>
<P><STRONG><FONT color=#ff0000></FONT></STRONG> </P>
<P><STRONG><FONT color=#ff0000></FONT></STRONG> </P>
<P><STRONG><FONT color=#ff0000></FONT></STRONG> </P></TD></TR></TBODY></TABLE></P>
<P align=center> </P>

文字特效代码

1、做绿色大字的代码

<P align=center><FONT style="FONT-SIZE: 60pt; FILTER: shadow(color=lime#b0c4de); WIDTH: 100%; COLOR: green; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><B>喜欢空间朋友</FONT></B></P>

效果如下

喜欢空间朋友

2、做紫红大字代码

</B><FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>欢迎大家来做客！</FONT>
<DIV></DIV><BR><BR>

效果如下

欢迎大家来做客！

3、做蓝色大字代码

<CENTER><FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #6495ed; LINE-HEIGHT: 150%; face: 新宋体"><B>有朋友的感觉真好</B></FONT></CENTER>

效果如下

有朋友的感觉真好 4、做红色大字代码
<FONT style="FONT-SIZE: 45pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>朋友遍天下！高兴！</B></FONT>

效果如下

朋友遍天下！高兴！

5、重叠字

我爱宝贝们，欢迎你们的到来

代码如下:

<div align="center" style="height:1;font-size:
30pt;filter:dropshadow(color=maroon,positive=1);">重叠字</div>

6、毛绒文字

远方的你还好吗

代码如下:

<SPAN style="DISPLAY: block; FONT-SIZE: 40pt; FILTER: glow(color=red,strength=10);
COLOR: blue; HEIGHT: 1px; TEXT-ALIGN: center">毛绒文字</SPAN>

7、描边中空抛射字

人不是因为幸福而笑，而是因为笑而幸福。

代码如下:

<DIV style="FILTER: shadow(color=#3300FF, strength=8); WIDTH: 290px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#33ffff>描边中空抛射字</FONT> </DIV>

8、长尾投影字

今天汗流的好吗

代码如下:

<div style="color:red;font-size:25pt;height:1;display:block; filter:progid:DXImageTransform.Microsoft.motionblur(strength=30,add=1,direction=135)"><p align="center">长尾投影字</div>

9、阴影文字

                                       想你的时候你也会想我吗

代码如下:

<table style="FILTER: dropshadow(color=#ff0000, offx=2, offy=2, </font></table>

10、带背景字体

ILOVEYOU

代码如下:

<FONT style="BACKGROUND-COLOR: #ff0000" color=#00ff00 size=5>带背景字体</FONT>

11、彩色渐变字体

彩色渐变字体

代码如下:

<FONT size=6><FONT color=#ff8900>彩</FONT><FONT color=#92c000>色</FONT><FONT color=#00c024>渐</FONT><FONT color=#00c0da>变</FONT><FONT color=#0053ff>字</FONT><FONT color=#4800ff>体</FONT>

代码基本综合属性分析
color=66FF33 颜色代码  可参见颜色表更改颜色
size=2 字体大小代码更改数值改变字体大小
FONT-SIZE: 20pt 字体大小代码更改数值改变字体大小
FONT-FAMILY: 华文行楷字体代码改变字体描述更改字体

中级教程《五》如何在图片加播放器

原代码：

<DIV align=left><FONT size=5>
<P style="TEXT-INDENT: 2em" align=center>
<TABLE style="FILTER: alpha(opacity=100 Style=0 FinishOpacity=100)" borderColor=#000000 height=300cellSpacing=0 cellPadding=0 width=300 align=center <TABLE style="BACKGROUND-IMAGE:
url(你需要的图片网址)" border=0><BR><TBODY><BR><TR><TR>
<TD align=left>
<P align=center><EMBED
style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black(); style: " src=你需要的MP3网址
width=0 height=0 type=video/x-ms-asf allowScriptAccess="never" allowNetworking="internal" loop="true" autostart="true" volume="0"></P></TD></TR></TBODY>
【width=300 和height=300 是图片的宽和高，可调】

→彩色播放器的制作【1】←

代码：

<TABLE style="BORDER-TOP-STYLE: dashed;

BORDER-RIGHT-STYLE: dashed;

BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE:

dashed" borderColor=#85B0F2

cellSpacing=0 width=200 bgColor=#2222FF border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#2222FF

align=center bgColor=#448FFF

border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center><EMBED style="FILTER:

Invert" src=音乐地址 width=300 height=20

type=audio/mpeg allowScriptAccess="never"

allowNetworking="internal" loop="-1" autostart="true"

volume="0"></EMBED></P></TD></TR></TBODY>

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

效果

代码：

<TABLE style="BORDER-RIGHT: #ff69b4 3px dotted;

BORDER-TOP: #ff69b4 3px dotted;

BORDER-LEFT: #ff69b4 3px dotted;

BORDER-BOTTOM: #ff69b4 3px dotted"

cellSpacing=0 cellPadding=0 align=center bgColor=white>
<TBODY>
<TR>
<TD><TABLE borderColor=#ff69b4

align=center bgColor=#ffccf5 border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300

height=45 type=audio/mpeg volume="0" autostart="false"

loop="-1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

效果

注：

  红色部分是播放器的颜色代码，可改

黄色部分是播放器的宽和高，可改

文章评论

空间小站
© All rights reserved.