〓游子制作〓 开编话:音画贴是用英文编写成的代码文本,像我这样年近八十的老人,又不懂英文,根本就是没办法做.好在HTML是一种标签语言,只要对标签的属性内容和属值有所理解,就可以采取复制套用的方法来编辑音画贴.因此,将常用的一些HTML标签代码和素材资料集放在此备用.这是最简单的代码学习和编辑小平台.是套用代码做贴的笨方法,或许也是一种独创. 新手启步学代码,可以在这里"即学即用,立马见效".做法是:复制要用的代码,粘贴到下面HTML编辑浏览器,修改标签内容的属值,例如文字或图片地址等对象内容即可. 这些资料是本人的学习心得,错误之处,请大家指正.-原创编辑:游子(广东省汕头市一个离休干部) 〓仅供参考〓
各种常用HTML标签代码模式目录
(一)全屏及图框代码(二)文字设置代码(三)文字竖排代码(四)各种贴图代码(五)定位标签代码(六)趣味的移动标签代码(七)多媒体设置(贴歌)标签代码(八)绝对定位挂贴实用标签代码(九).超链接标签代码(十)其它常用标签代码及语句(十一)编辑音画贴各种素材(十二)编辑音画贴的各种代码实例(十三)图框和贴图代码实例(十四)各种特效文字代码实例[html代码编辑浏览框]∣(一)全屏及图框代码:
◆1.全屏(相对定位)代码:
<DIV id=table1 style="LEFT: 0px; WIDTH: 900px; POSITION: relative; TOP: 20px">
</DIV><br><br>
◆2颜色背景图框代码.
<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://image14.360doc.com/DownloadImg/2010/08/1409/4610000_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>
返回到"代码模式目录"。(二)文字设置代码:
◆1.文字设置基本代码:
<font face=黑体 size=4 color=red>
插入文字内容
</font>
◆2.大号文字设置代码:
<font face=黑体 style=font:50pt color=red>
插入文字内容
; </font>
◆3.文字的边外加光辉效果代码:
<div style="FILTER: Glow(color=#000000,strength=6); HEIGHT: 6pt">
<FONT style="FONT-SIZE: 60pt;FONT-FAMILY:隶书; COLOR: #ffff00">
如画江山
</FONT></div>
◆4.文字重叠效果代码:
<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>
◆5.文字重叠效果代码:
<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>
◆5.文字有颜色背景的代码:
<font STYLE="background-color:#0000ff" font face=黑体 style="FONT-SIZE: 22pt; color=#FFECEC"><b>
〖文字有颜色背景的代码〗
</font></b>
返回到"代码模式目录"。(三)文字竖排代码:
◆1.文字靠左竖排代码:
<p> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff>
更喜岷山千里雪,<br> 三军过后尽开颜。<br> .....<br> </FONT></P>
◆2.文字居中竖排代码:
<p align=CENTER> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff>
更喜岷山千里雪,<br> 三军过后尽开颜。<br> .....<br> </FONT></P>
◆2.文字靠右竖排代码:
<p align=RIGHT> <font style="WRITING-MODE: tb-rl"style=font:14pt color=0000ff>
更喜岷山千里雪,<br> 三军过后尽开颜。<br> .....<br>
</FONT></P>
返回到"代码模式目录"。(四)各种贴图代码:
◆1.贴图代码1:
<img src="图片地址">
◆2.贴图代码2:
<INPUT src="图片地址" type=image width=500>
◆3.羽化图片代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" INPUT src="图片地址" type=image width=400>
◆4.贴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" ;;>
◆5.图片加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>
◆5.绝对定位加叠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">
返回到"代码模式目录"。(五)定位标签代码:
20.定位标签代码:
<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>
返回到"代码模式目录"。(六)趣味的移动标签代码:
◆1,默然从右向左移动代码:
<marquee>移动内容文字或图片</marquee>
◆2,从右向左移动代码:
<marquee scrollamount=3 direction=left>移动内容文字或图片</marquee>
◆3,从左向右移动的代码:
<MARQUEE scrollAmount=3 direction=right>移动内容文字或图片lt;/marquee>
◆4,左右来回走的代码:
<marquee scrollamount=8 behavior=alternate >动内容文字或图片</marquee>
◆5.从下向上移动的代码:
<marquee scrollamount=1 direction=up >移动内容文字或图片</marquee>
◆6.从下向上从上向下移动的代码:
<marquee scrollamount=1 direction=down>移动内容文字或图片</marquee>
返回到"代码模式目录"。(七)多媒体设置(贴歌)标签代码:
◆1.银色播放器代码:
<EMBED src="音乐文件地址" width=500 height=50 type=audio/x-ms-wma autostart="true" loop="true">
◆2.图框加入歌词﹑图片和播放器代码:
<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://image14.360doc.com/DownloadImg/2010/08/1409/4610000_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>
返回到"代码模式目录"。(八)绝对定位挂贴实用标签代码:
◆1.相对定位代码:
<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>
◆3.绝对定位挂贴图片代码:
<img src="//bbs.gw.com.cn/UploadFile/2008-6/20086111653319630.jpg"width=250 style="LEFT: 260px; WIDTH: 250px; POSITION: absolute; TOP: 130px; HEIGHT: 320px">
◆4.绝对定位挂贴羽化图片代码:
<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">
◆5.绝对定位挂贴横排文字代码:
<font face=黑体 style=font:30pt color=ffff00 style="LEFT: 600px; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 30px"> 挂贴横排文字</font>
◆6.绝对定位挂贴竖排文字代码:
<font face=黑体 style=font:30pt color=ffff00 style="LEFT: 680px; WIDTH: 50px; POSITION: absolute; TOP: 170px; HEIGHT: 320px"> 挂贴竖排文字</font>
◆7.绝对定位挂贴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>文字依原始样式显示双标签
半个空格 一个空格. <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-颜色背景图框
2-图片背景的图框
3-红色背景淡化的图框
4-三合一图框
5-10层图框代码
6--带滚动条文本框代码
104
7-图片加Flash和文字
8-网页上绝对定位贴Flash
9-单元格定位内容居中
10-图片加立体边框代码
106
11-立体阴影框代码
12-图片左右颠倒实例代码
107
13-粒状阴影边框代码
14-简单的音乐试听播放器
15-文字边外加光辉效果代码
16-文字阴影果代码2
108
17-文字阴影效果代码4
18-文字阴影果代码
108
19-靠右插入竖排文字
20-绝对定位挂贴竖排文字1
108
21-绝对定位挂贴竖排文字2
22-绝对定位挂贴竖排文字代码模块
108
23-文字从下向上移动的代码
24-整张页面来回移动的代码
25-图片文字走四方的代码
26-斜着移动合并的代码
27-绝对定位挂贴Flash
28-绝对定位相片加叠相框
29-羽化图片绝对定位加叠文字、图片和Flash
30-绝对定位加叠文字、图片和Flash
返回到"代码模式目录"。原创编辑:游子 2008年10月试编 2010年03月改编
(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请维护网络荣辱公德不要把原创编辑游子的名字改掉。谢谢!)
本文件下载地址:
http://www.53199.com/bbs/UploadFile/2010-3/2010377202465633.txt