分享

HTML代码实际应用讲解

 药林怪人.樱凡 2006-06-10




原代码如下:
<TABLE align=center background="背景图片网址" border=10 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD>

帖子的文章加图片

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


注意:前边用了多少<table......><tr><td>后面就要有多少</td></tr></table>收尾。多收和少收都会使帖子出错哦 :)


常用的参数设定及注解:

<table width="400" border="10" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="图片网址" bgcolor="#0000FF" bordercolor="#CF0000" bordercolorlight="#00FF00" bordercolordark="#00FFFF">

width="400"
表格宽度,接受绝对值(如 500)及相对值(如 80%)。

border="10"
表格边框的厚度。

cellspacing="2"
表格格线的厚度

cellPadding=5 表格格线内厚度


align="CENTER"
表格的摆放位置(水平),可选值为:左: left, 右: right, 居中: center

valign="TOP".
表格内内容的对齐方式(垂直),可选值为: top, middle, bottom。   

background="背景图片网址"
表格的背景图片,与 bgcolor 不要同用。

bgcolor="#0000FF"
表格的底色,与 background 不要同用

bordercolor="#CF0000"
表格边框颜色

bordercolorlight="#00FF00"
表格边框向光部分的颜色

bordercolordark="#00FFFF"
表格边框背光部分的颜色,使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。


二.文字应用

1.文字基本设制

基本代码如下:

<P align=center><FONT color=#CFCF88 face=华文行楷 size=5>插入文字</FONT></P>


<P align=center>表示居中,<P align=left>表示居左,<P align=right>表示居右。

face=字体 常用字体为:宋体.黑体.楷体.仿宋.华文行楷.新宋体.华文新魏等

size=字体大小,这里的最大值为7 取值越大文字就越大

另一种贴法:

<font style=font:40pt face=新宋体 color=#ff0000>插入文字</font>

font:40pt 数值越大文字就越大。

color=颜色代码。
2.移动文字

效果:

移动文字
可根据下面基本代码
自行调节效果

基本代码:

<marquee direction=up behavior=scroll width=400 height=90 scrolldelay=80 scrollamount=1><font color=red size=+2 face=华文新魏>插入文字</font></marquee>

说明:
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)

behavior=移动方式, scroll 一圈一圈绕着走, slide 只走一次, behavior=alternate 来回走

width=宽度  height=高度  scrolldelay=速度  scrollamount=位移

上面的参数大家可以根据不同的情况自行调节。


3。文字特效

效果1(文字自动飘浮)

欢迎你的到来


代码如下:
<table align=center border=3 bordercolor="#CD5C5C" width=500 height=375><td background=http://my./hm9600/NP/N/lu10.jpg><marquee behavior=alternate scrollamount=3 direction=down height=350><marquee behavior=alternate scrollamount=3 width=500><img src=http://my./hm9600/NP/N/C.gif><font color=red size=6><b>欢迎你的到来</b><img src=http://my./hm9600/NP/N/C.gif></font></marquee></table>


效果2



代码如下:

<center><table width=500><tr><td><font color=#991144&><marquee behavior=alternate><MARQUEE behavior=alternate><FONT face=宋体 color=red size=4><MARQUEE direction=up behavior=alternate width=60 height=120>前</MARQUEE><FONT color=orange> <MARQUEE direction=up behavior=alternate width=60 height=80>世</MARQUEE><FONT color=#FF8CA9><MARQUEE direction=up behavior=alternate width=60 height=120>欢</MARQUEE><FONT color=green> <MARQUEE direction=up behavior=alternate width=60 height=80>迎</MARQUEE><FONT color=blue><MARQUEE direction=up behavior=alternate width=60 height=120>光</MARQUEE><FONT color=lime> <MARQUEE direction=up behavior=alternate width=60 height=80>临</MARQUEE></FONT></FONT>


文字特效有很多种,本论坛有单独的教程。这里不再介绍 :)

 三.贴图

1.基本代码:

<img src=图片网址 width=图片宽度 height=图片长度>

注意:设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实大小,以免失真,若需要改图片大小最好使用图像编辑工具(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)。图片的居中,居左,居右上面已经介绍了,这里不再重复。。。。。

2.给图片加边框

效果:



基本代码:

<table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://my./hm9600/NP/N/lu10.jpg width=500 height=375></td></table>

说明:

border="6" 表格边框的厚度,不同浏览器有不同的内定值。

cellspacing="2" 表格格线的厚度

cellPadding=1 表格格线内厚度

borderColor=#841A00 边框色彩

3.图片朦胧

A.圆形效果



代码: <IMG src="图片" width=500 height=375 style="filter:Alpha(opacity=100,style=2);">


B.方形效果


代码: <IMG src="图片" style="FILTER: Alpha(opacity=200,style=3)" width=500 height=375 ALGIN="MIDDLE">



 四.透明FLAH的应用

1.常用效果


代码如下:

<center><TABLE cellSpacing=2 cellPadding=2 border=10 bordercolor=#84B98D background=图片><TBODY><TD><EMBED src=透明网址 width=500 height=375 type=application/x-shockwave-flash quality="high" menu="false" wmode="transparent"></embed></table></center>

注意:长和宽的设定要根据图片的实际大小来设定


2.定位透明FLASH效果

注意:这种方法由于是通过坐标的方式把透明FLASH固定到了某一点,所以在不同的环境和不同的论坛要相应调整不同的位置。定位较为麻烦,而且最大的弊病就是屏幕分辨率设置不一样,观看的效果也不一样(比如你是用分辨率1024×768做的帖子,你感觉固定的位置很好。但别人用分辨率800×600观看却偏得很远。本人建议一般不要用这种方法。

定位效果图








一:背景





一个完整的HTML帖子应该是:

美贴=背景+文章+插图+收尾






代码如下:

<TABLE align=center background="http://my./hm9600/NP/N/%C0%B6shui.jpg" border=10 cellPadding=5 cellSpacing=2 borderColor=#841A00 width=500><TBODY><TR><TD><br>
<center><table border=6 cellSpacing=2 cellPadding=1 borderColor=#841A00><td><img src=http://my./hm9600/NP/N/lu10.jpg width=400 height=300></td></table></center><br>
<EMBED style="LEFT: 400px; WIDTH: 400px; POSITION: absolute; TOP: 7890px; HEIGHT: 300px" align=right src=http://my./ctv/flash/tm/%D0%C7%B9%E211.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>
</TD></TR></TBODY></TABLE>


说明:TOP: 6910px 指FLASH与帖子上边之间的距离。
LEFT: 400px 是指FLASH与帖子左边的距离
WIDTH: 400px HEIGHT: 300px 是指FLASH定位的范围宽度和高度
后面的width=400 height=300 就是指FLASH的宽和高了



 五.贴歌代码

1.背景音乐(适合 mid wma等格式)
<bgsound src=音乐网址 Loop=-1>

2.音频(适合MP3 WMA RM等很多格式)



代码如下:
<embed src=音乐网址 type=audio/x-pn-realaudio-plugin controls=ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=40>

3.视频
<embed src=视频网址 type=audio/x-pn-realaudio-plugin controls=imagewindow,ControlPanel,StatusBar AutoStart=true Loop=true width=400 height=400>

4.FLASH
<embed src=网址 width=400 height=400>


说明:AutoStart=true 表示是否要音乐文件传送完就自动播放,TRUE是要,FALSE是不要,默认为true

Loop=true 表示设定播放重复次数,LOOP=3表示重复3次,true表示无限次播放,FALSE播放一次即停止。

width=宽度 height=高度 可以设定控制播放器面板的大小,如果都设置为0就可以把播放器隐藏了。


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约