原创设计 · PhotoShop · AI/CD · Fireworks · AutoCAD · 3DMAX · Flash · 网页教学 · 高精图库 · 笔刷滤镜 · 矢量素材 · 图片素材 · 模板素材 · 会员相册

 25 123
发新话题
打印

[07.07.23][转帖]HTML代码运用示例汇总

[07.07.23][转帖]HTML代码运用示例汇总

以前经常有人会问如何在页面中加入播放器?你可以在编辑时点击插入播放器而无需用到HTML代码。但是,千篇一律的款式是不是会让人久而生厌呢?其实,要想让你自己的网页变得生动,一款漂亮的,合乎页面整体设计的播放器就显得极其重要了。现在为你推荐一些漂亮的播放器,你只需复制代码放入你的文章里,就可以使用了。

一、几款最常用的播放器

代码如下
(EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg loop="-1" autostart="FALSE" volume="0")

代码如下
(EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50 type=audio/mpeg volume="0" autostart="TRUE" loop="true")

代码如下
(EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05 type=audio/mpeg loop="-1" autostart="false" volume="0")

代码如下
(EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45 type=audio/mpeg loop="-1" autostart="true" volume="0")

重要提示:
1 复制时务必将(EMBED。。。)前后的括号()替换成<>。这点非常重要。
2 WIDTH代表播放器宽度,HEIGHT代表高度,后面的数值可依自己喜好进行调整。
3 AUTOSTART="TRUE" 这里TRUE代表自动播放,如果换成FALSE则代表手动播放。

二、装饰美化你的播放器

有了基本的款式后,我们就可以根据自己的想象力,巧用HTML的表格,根据自己的图片素材,装饰美化自己的播放器啦。只要你有足够的创意,调整代码,就可以得到各式各样的播放器。这里抛砖引玉先介绍几款。

首先我们可以为黑色播放器加上一个边缘
(中间绿底的部分为原黑色播放器代码)

<TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; BORDER-LEFT: #000000 3px dashed; BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0 bgColor=#00000>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD><P align=center><EMBED style="FILTER: Xray" src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="- 1"></P></TD></TR></TBODY></TABLE></TD></TR>& lt;/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>

    还可以将播放器置于一个单独的表格里,并加上表格的透明特效,播放器上的花纹就是表格的底图。(中间紫底部分的为原蓝色播放器代码)

代码如下:
<TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE>

    还可以利用动态的GIF背景做成动态播放器
(中间蓝底部分为原来的灰色播放器代码

代码如下:
<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif border=2>
<TBODY>
<TR>
<TD>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=60,style=3)">
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY> </TABLE>

    甚至还可以将动态背景只在播放器底部运行
    中间棕底字体为原灰色播放器代码

代码如下
<TABLE height=40 cellSpacing=0 cellPadding=0 width=300 background=http://bbs.guqu.net/UploadFile/2005-4/20054302075888035.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Chroma (Color=''''#000000'''')" height=40 cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=40 type=audio/mpeg loop="-1" autostart="false" volume="0"></P></TD></TR></TBODY></TABLE></TD>< /TR></TBODY></TABLE>





[ 本帖最后由 冰糖沁儿 于 2007-7-25 21:55 编辑 ]




╲╱╲___朋,兩月相照,月明如心,故兩心相對_____________

TOP

用CSS打造你的播放器

invert滤镜

<!--invert滤镜播放器效果代码:
<div align="center"><embed style="FILTER: invert(); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" type="audio/mpeg" loop="false" autostart="false" showstatusbar="1" /></div>
-->
Blur滤镜

<!--Blur滤镜播放器效果代码:
<div align="center"><embed style="FILTER: Blur(); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="false" showstatusbar="1" /></div>
-->
Gray滤镜

<!--Gray滤镜播放器效果代码:
Gray滤镜 <div align="center"><embed style="FILTER: Gray(); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="false" showstatusbar="1" /></div>
-->

Xray滤镜
<!--Xray滤镜播放器效果代码:
Xray滤镜 <div align="center"><embed style="FILTER: Xray(); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="false" showstatusbar="1" /></div>
-->
alpha滤镜

<!--alpha滤镜播放器效果代码:
alpha滤镜 <div align="center"><embed style="filter:Alpha(opacity=10,finishOpacity=100,style=2); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="false" showstatusbar="1" /></div>
-->
Wave滤镜

<!--Wave滤镜播放器效果代码:
Wave滤镜 <div align="center"><embed style="FILTER: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="false" showstatusbar="1" /></div>
-->
alpha滤镜

<!--alpha滤镜播放器效果代码:
alpha滤镜 <div align="center"><embed style="FILTER: alpha(opacity=100,style=3); WIDTH: 350px; HEIGHT: 50px" src="音乐地址" width="128" height="128" type="audio/mpeg" volume="0" loop="false" autostart="false" showstatusbar="1" /></div>




╲╱╲___朋,兩月相照,月明如心,故兩心相對_____________

TOP

 

 

 

<table style="filter: alpha(opacity=100 Style=0 FinishOpacity=100); font-size: 16px; color: #000000" borderColor="#000000" height="249" cellSpacing="0" cellPadding="0" width="316" align="center" background="http://blog.chosun.com/web_file/blog/167/9167/1/rosa-77-06-2.gif" border="0" id="table1"><tr><td width="314" height="180" cellpadding="0" cellspacing="0"></td></tr><tr><td align="left"><p align="center"><embed style="FILTER: alpha(opacity=100 Style=3 FinishOpacity=0)black(); style: " src="http://mms.blog.xuite.net/56/2d/13330920/blog_66167/dv/3719362/3719362.mp3" width="310" height="28" type="video/x-ms-asf" volume="0" autostart="1" loop="-1"></td></tr></table>





╲╱╲___朋,兩月相照,月明如心,故兩心相對_____________

TOP


播放器蒙胧化:

<P align=center><TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 259px; HEIGHT: 83px">
<TBODY>
<TR>
<TD>
<EMBED src=http://mms.blog.xuite.net/28/bd/13016017/blog_48134/dv/3538547/3538547.wma width=250 height=40 type=audio/mpeg loop="true" autostart="true" panel="0"></TD></TR></TBODY></TABLE></P>







╲╱╲___朋,兩月相照,月明如心,故兩心相對_____________

TOP









<TABLE borderColor=#4f3256 align=left background=http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0022.gif border=1> <TBODY> <TR> <TD style="FILTER: alpha(opacity=100,style=3)"><EMBED src=http://music.00sky.com/music_2/i/0806/67382.wma width=300 height=45 type=audio/mpeg volume="0" autostart="ture" loop="-1"> <BR> <P></P></TD></TR></TBODY></TABLE><BR><BR><BR><BR><BR><BR><BR>





╲╱╲___朋,兩月相照,月明如心,故兩心相對_____________

TOP

我说明一下 这的数值是可以根据自己所需要更改的哈(有点废话的感觉) 音乐地址换一个自己需要的音乐地址(也像废话) 。。。。。




╲╱╲___朋,兩月相照,月明如心,故兩心相對_____________

TOP

支持发代码教程






 

216色html颜色代码

#000000 #000033 #000066 #000099 #0000cc #0000ff
#003300 #003333 #003366 #003399 #0033cc #0033ff
#006600 #006633 #006666 #006699 #0066cc #0066ff
#009900 #009933 #009966 #009999 #0099cc #0099ff
#00cc00 #00cc33 #00cc66 #00cc99 #00cccc #00ccff
#00ff00 #00ff33 #00ff66 #00ff99 #00ffcc #00ffff
#330000 #330033 #330066 #330099 #3300cc #3300ff
#333300 #333333 #333366 #333399 #3333cc #3333ff
#336600 #336633 #336666 #336699 #3366cc #3366ff
#339900 #339933 #339966 #339999 #3399cc #3399ff
#33cc00 #33cc33 #33cc66 #33cc99 #33cccc #33ccff
#33ff00 #33ff33 #33ff66 #33ff99 #33ffcc #33ffff
#660000 #660033 #660066 #660099 #6600cc #6600ff
#663300 #663333 #663366 #663399 #6633cc #6633ff
#666600 #666633 #666666 #666699 #6666cc #6666ff
#669900 #669933 #669966 #669999 #6699cc #6699ff
#66cc00 #66cc33 #66cc66 #66cc99 #66cccc #66ccff
#66ff00 #66ff33 #66ff66 #66ff99 #66ffcc #66ffff
#990000 #990033 #990066 #990099 #9900cc #9900ff
#993300 #993333 #993366 #993399 #9933cc #9933ff
#996600 #996633 #996666 #996699 #9966cc #9966ff
#999900 #999933 #999966 #999999 #9999cc #9999ff
#99cc00 #99cc33 #99cc66 #99cc99 #99cccc #99ccff
#99ff00 #99ff33 #99ff66 #99ff99 #99ffcc #99ffff
#cc0000 #cc0033 #cc0066 #cc0099 #cc00cc #cc00ff
#cc3300 #cc3333 #cc3366 #cc3399 #cc33cc #cc33ff
#cc6600 #cc6633 #cc6666 #cc6699 #cc66cc #cc66ff
#cc9900 #cc9933 #cc9966 #cc9999 #cccccc #ccccff
#ccff00 #ccff33 #ccff66 #ccff99 #ccffcc #ccffff
#ff0000 #ff0033 #ff0066 #ff0099 #ff00cc #ff00ff
#ff3300 #ff3333 #ff3366 #ff3399 #ff33cc #ff33ff
#ff6600 #ff6633 #ff6666 #ff6699 #ff66cc #ff66ff
#ff9900 #ff9933 #ff9966 #ff9999 #ff99cc #ff99ff
#ffcc00 #ffcc33 #ffcc66 #ffcc99 #ffcccc #ffccff
#ffff00 #ffff33 #ffff66 #ffff99 #ffffcc #ffffff

 

颜色的英文名称

red crimson firebrick
darkred brown maroon
sienna saddlebrown indianred
rosybrown lightcoral salmon
darksalmon coral tomato
sandybrown lightsalmon peru
chocolate orangered orange
darkorange tan peachpuff
bisque moccasin navajowhite
wheat burlywood darkgoldenrod
goldenrod gold yellow
lightgoldenrodyellow palegoldenrod khaki
darkkhaki lawngreen greenyellow
chartreuse lime limegreen
yellowgreen olive olivedrab
darkolivegreen forestgreen darkgreen
green seagreen mediumseagreen
darkseagreen lightgreen palegreen
springgreen mediumspringgreen teal
darkcyan lightseagreen mediumaquamarine
cadetblue steelblue aquamarine
powderblue paleturquoise lightblue
lightsteelblue skyblue lightskyblue
mediumturquoise turquoise darkturquoise
aqua cyan deepskyblue
dodgerblue cornflowerblue royalblue
blue mediumblue navy
darkblue midnightblue darkslateblue
slateblue mediumslateblue mediumpurple
darkorchid darkviolet blueviolet
mediumorchid plum lavender
thistle orchid violet
indigo darkmagenta purple
mediumvioletred deeppink fuchsia
magenta hotpink palevioletred
lightpink pink mistyrose
blanchedalmond lightyellow cornsilk
antiquewhite papayawhip lemonchiffon
beige linen oldlace
lightcyan aliceblue whitesmoke
lavenderblush floralwhite mintcream
ghostwhite honeydew seashell
ivory azure snow
white gainsboro lightgrey
silver darkgray lightslategray
slategray gray dimgray
darkslategray black

[ 本帖最后由 一个人 于 2007-7-23 00:16 编辑 ]





由此进入飞鹰的地界

TOP

俺也来几个播放器




 

 

 <*TABLE borderColor=#000000 height=249 cellSpacing=0 cellPadding=0 width=324 align=center background=http://cafe.chosun.com/img_file/club_file/98/mugoonghwa/bbs/23/midi-3-1[20050619132331].gif border=0>
<*TBODY>
<*TR>
<*TD width=324 height=202 cellSpacing="0" cellPadding="0"><*/TD><*/TR>
<*TR>
<*TD align=left>
<*P align=center><*EMBED src=http://bbs.62368.com/user_bgsound/6cacde25-0ed8-4eb9-a277-d68693ab5321.mp3 width=300 height=24 type=application/x-mplayer2 loop="-1" autostart="0" volume="0"> <*/P><*/TD><*/TR><*/TBODY><*/TABLE><*/DIV>








 

 

<*TABLE borderColor=#000000 height=249 cellSpacing=0 cellPadding=0 width=314 align=center background=http://blog.chosun.com/web_file/blog/167/9167/1/from-00-11-07.gif border=0>
<*TBODY>
<*TR>
<*TD width=314 height=180 cellpadding="0" cellspacing="0"><*/TR>
<*TR>
<*TD align=left>
<*P align=center><*EMBED src=http://bbs.62368.com/user_bgsound/6cacde25-0ed8-4eb9-a277-d68693ab5321.mp3 width=310 height=28 type=video/x-ms-asf volume="0" autostart="0" loop="-1"><*/P><*/TD><*/TR><*/TBODY><*/TABLE><*/DIV>











 

 

 


<*TABLE style="FILTER: Alpha(Opacity=300, FinishOpacity=0, Style=2, StartX=20,StartY=30, FinishX=0, FinishY=0)invert()">

<*
TBODY><*TR><*TD>

<*
EMBED style="FILTER: xray()" src=音乐地址 loop="false" width=300 height=30 type=audio/mpeg showstatusbar="0">

<*/
EMBED><*/TD><*/TR><*/TBODY><*/TABLE>










 


<*TABLE style="BORDER-COLLAPSE: collapse" height=24 cellSpacing=0 cellPadding=0 width=300 background=http://bbs.muwen.com/fileuploaddir/4B258184577.gif border=0>

<*TBODY><*TR><*TD style="FILTER: Chroma(Color='#000000')">

<*EMBED src=音乐连接地址 width=300 height=24 type=audio/mpeg  ShowStatusBar="1" volume="0" autostart="true" loop="false" >

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














 


<*TABLE align=center 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 bgColor=white>
<*TBODY><*TR><*TD><*TABLE borderColor=#ff69b4 bgColor=#ffccf5 border=2><*TBODY><*TR><*TD style="FILTER: alpha(opacity=100,style=3)">
<*EMBED src=音乐地址 width=300 height=45 type=audio/mpeg volume="0" autostart="true" loop="false"><*/EMBED>
<*/TD><*/TR><*/TBODY><*/TABLE><*/TD><*/TR><*/TBODY><*/TABLE>














<*TABLE align=center borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif border=2>
<*TBODY>
<*TR>
<*TD>
<*TABLE border=0>
<*TBODY>
<*TR>
<*TD style="FILTER: alpha (opacity=60,style=3)"><*EMBED style="FILTER: Gray" src=歌曲地址 width=300 height=45 type=audio/mpeg loop="false" autostart="true" volume="0"> <*/TD><*/TR><*/TBODY><*/TABLE><*/TD><*/TR><*/TBODY><*/TABLE>
;









<*TABLE align=center borderColor=#4f3256 align=center background=http://www.zzi.cc/sck/jmbz/bz4/3.jpg border=0>
<*TBODY>
<*TR>
<*TD style="FILTER: alpha (opacity=50,style=3)">
<*EMBED src=http://222.92.21.147/sudaceo/Progress/10/the_one_you_love.mp3  width=300 height=45 type=audio/mpeg loop="false" autostart="false" volume="0">
<*/TD><*/TR><*/TBODY><*/TABLE>






 

 

<*DIV align=center>
<*EMBED src=音乐地址  width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"><*/EMBED>







 

 

 

<*DIV align=center><*EMBED style="FILTER: Xray" src=音乐地址 width=400 height=25 type=audio/mpeg loop="-1" autostart="false" volume="0"><*/EMBED>






 

 

<*DIV align=center><*EMBED style="FILTER: Gray" src=音乐地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"><*/EMBED>;






 

 

<*DIV align=center><*EMBED style="FILTER: Invert" src=音乐地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"><*/EMBED>










 

 

<*TABLE style="FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=20, StartY=40, FinishX=0, FinishY=0)gray(); WIDTH: 300px; HEIGHT: 60px">

<*
TBODY><*TR><*TD>

<*
EMBED src=音乐地址 width=300 height=45 type=audio/mpeg loop="false" autostart="false" panel="0">

<*/
TD><*/TR><*/TBODY><*/TABLE>;















 

 

<*TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP: #000000 3px dashed; BORDER-LEFT: #000000 3px dashed; BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0 bgColor=#00000>
<*TBODY>
<*TR>
<*TD>
<*TABLE borderColor=#000000 align=center border=1>
<*TBODY>
<*TR>
<*TD><*P align=center><*EMBED style="FILTER: Xray" src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300 height=45 type=audio/mpeg volume="0" autostart="false" loop="- 1"><*/P><*/TD><*/TR><*/TBODY><*/TABLE><*/TD><*/TR><*/TBODY><*/TABLE>

 











 


 


<*TABLE borderColor=#4f3256 align=center background=http://upload.yourblog.org/20057/kaka967.20050722115212.png border=1>
<*TBODY>
<*TR>
<*TD style="FILTER: alpha (opacity=50,style=3)">
<*P align=center> <*EMBED src=歌曲地址 width=300 height=45 type=audio/mpeg loop="-1" autostart="false" volume="0"><*/P><*/TD><*/TR><*/TABLE>

 

 

记得要把代码里的  *  去掉^&^





TOP

:a16 谢谢咯,..偶都收藏了哦..嘻嘻!!. 多谢一个人.和诗婀娜





TOP

:a16 不错```这个非常不错 记得有好的播放器来随时更新``让大家都会做漂亮的播放器``





□爱在心间□

TOP

‹‹ 上一主题 | 下一主题 ››
 25 123
发新话题



关于本站 广告服务 联系我们 版权隐私 合作站点 网站地图 免责申明 管理团队

Powered by Discuz!6.0.0 Copyright © 2008 www.missyuan.com All rights reserved.