|

楼主 |
发表于 2004-11-14 21:52
|
显示全部楼层
===== HTML语言制贴快速入门 =====
[这个贴子最后由沧海茫茫在 2004/12/05 11:56pm 第 9 次编辑]
12月05日更新
八、附录
1、文字编码实例
2、图片编码实例
#Moderation Mode
以下内容需要积分高于 0 才可浏览
1、文字
1)介绍一种常用的空心立体字格式
- <center><FONT style="COLOR: #FFFF00; FILTER: shadow(color=red); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%">欢迎朋友光临</FONT></center>
复制代码 显示效果:
<center><FONT style="COLOR: #FFFF00; FILTER: shadow(color=red); FONT-FAMILY: 华文彩云; FONT-SIZE: 30pt; LINE-HEIGHT: 150%; WIDTH: 100%">欢迎朋友光临</FONT></center>
术语解释:
- A)COLOR: #FFFF00:颜色设置为黄色
- B)FILTER: shadow(color=red):字内的虚影为红色;
- C)FONT-FAMILY: 华文彩云:字体为华文彩云空心字;
- D)SIZE: 30pt:表示字的大小,字体为30点象素大小;
- E)LINE-HEIGHT: 150%; WIDTH: 100% :行高和行宽(一般不要动)
复制代码
[B]2) 上右阴影字[/B]- <center><SPAN style="FILTER: shadow(color=#99CC99, direction=50); WIDTH: 80%; LETTER-SPACING: 5pt"><FONT face=楷体_GB2312 size=8 color=#ff0000><center>欢迎朋友光临</center></FONT></SPAN></center>
复制代码 显示效果:
<center><SPAN style="FILTER: shadow(color=#99CC99, direction=50); WIDTH: 80%; LETTER-SPACING: 5pt"><FONT face=楷体_GB2312 size=8 color=#ff0000><center>欢迎朋友光临</center></FONT></SPAN></center>
[B]3)下阴影字[/B]
- <center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #ffff00; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体">欢迎朋友光临,祝你愉快每一天!</FONT></center>
复制代码 显示效果:
<center><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #ffff00; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体">欢迎朋友光临,祝你愉快每一天!</FONT></center>
4)全虚影字
- <center><FONT style="FONT-SIZE: 14pt; FILTER: glow(color=#006600); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312">《中国的月亮》<br>演唱:彭丽媛<BR><BR>哪里月不圆<BR>何处月无光<BR>我却深深地爱着你<BR>中国的月亮<BR>你传说美丽的嫦娥<BR>你讲述勤劳的吴刚<BR>你把母亲的微笑<BR>撒给炎黄儿女多少慈祥<BR>啊 月亮 中国的月亮<BR>啊 月亮 自己的月亮<BR>自古月是故乡明<BR>你深深地爱<BR>你甜甜的情<BR>总珍藏在我心上<BR><BR></FONT></center>
复制代码 显示效果:
<center><FONT style="FONT-SIZE: 14pt; FILTER: glow(color=#006600); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312">《中国的月亮》<br>演唱:彭丽媛<BR><BR>哪里月不圆<BR>何处月无光<BR>我却深深地爱着你<BR>中国的月亮<BR>你传说美丽的嫦娥<BR>你讲述勤劳的吴刚<BR>你把母亲的微笑<BR>撒给炎黄儿女多少慈祥<BR>啊 月亮 中国的月亮<BR>啊 月亮 自己的月亮<BR>自古月是故乡明<BR>你深深地爱<BR>你甜甜的情<BR>总珍藏在我心上</FONT></center>
补充术语解释:
- style="FONT-SIZE:字体为虚影字
- FILTER: glow(color=#9932cc):虚影为绿色;
- COLOR: #ffffff:字内为白色;
复制代码 [B]5)字分左右移动[/B]
- <center><FONT color=#660000 face=隶书 size=7><MARQUEE height=50 width=240>夕阳无限好</FONT></MARQUEE><FONT color=#660000 face=隶书 size=7><MARQUEE direction=right height=50 width=240>好限无阳夕</MARQUEE></FONT></center>
复制代码
显示效果:
<p align=center><FONT color=#660000 face=隶书 size=7><MARQUEE height=50 width=240>夕阳无限好</FONT></MARQUEE><FONT color=#660000 face=隶书 size=7><MARQUEE direction=right height=50 width=240>好限无阳夕</MARQUEE></FONT></p>
6)字的上升速度控制
- <MARQUEE scrollAmount=1 scrollDelay=150 direction=up width=500 height=200>
- <FONT style="FONT-SIZE: 14pt; FILTER: glow(color=#9932cc); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312"><center>《中国的月亮》<br>演唱:彭丽媛<BR><BR>哪里月不圆<BR>何处月无光<BR>我却深深地爱着你<BR>中国的月亮<BR>你传说美丽的嫦娥<BR>你讲述勤劳的吴刚<BR>你把母亲的微笑<BR>撒给炎黄儿女多少慈祥<BR>啊 月亮 中国的月亮<BR>啊 月亮 自己的月亮<BR>自古月是故乡明<BR>你深深地爱<BR>你甜甜的情<BR>总珍藏在我心上</center></FONT></MARQUEE>
复制代码 显示效果:
<MARQUEE scrollAmount=1 scrollDelay=100 direction=up width=500 height=350> <FONT style="FONT-SIZE: 14pt; FILTER: glow(color=#9932cc); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 150%; FONT-FAMILY: 楷体_GB2312"><center>《中国的月亮》<br>演唱:彭丽媛<BR><BR>哪里月不圆<BR>何处月无光<BR>我却深深地爱着你<BR>中国的月亮<BR>你传说美丽的嫦娥<BR>你讲述勤劳的吴刚<BR>你把母亲的微笑<BR>撒给炎黄儿女多少慈祥<BR>啊 月亮 中国的月亮<BR>啊 月亮 自己的月亮<BR>自古月是故乡明<BR>你深深地爱<BR>你甜甜的情<BR>总珍藏在我心上<center></FONT></MARQUEE>
补充术语解释:
scrollAmount=1 scrollDelay=150:移动一行(上升)的延迟时间(比正常移动长50%)。
direction=up:移动方向为上升
7)字的跳动控制
- <center><b><FONT face=楷体_gb2312 color=#0000ff size=10><FONT color=#0000ff><MARQUEE direction=up behavior=alternate width=65 height=100 align="middle">欢</MARQUEE><FONT color=#ff0000><MARQUEE direction=up behavior=alternate width=65 height=90>迎</MARQUEE><FONT color=#ffff00><MARQUEE direction=up behavior=alternate width=65 height=100>朋</MARQUEE><FONT color=#00ff00><MARQUEE direction=up behavior=alternate width=65 height=90>友</MARQUEE><FONT color=#00ffff><MARQUEE direction=up behavior=alternate width=65 height=100>光</MARQUEE><FONT color=#9932cc><MARQUEE direction=up behavior=alternate width=65 height=90>临</MARQUEE></b></center>
复制代码 显示效果:
<center><b><FONT face=楷体_gb2312 color=#0000ff size=10><FONT color=#0000ff><MARQUEE direction=up behavior=alternate width=65 height=100 align="middle">欢</MARQUEE><FONT color=#ff0000><MARQUEE direction=up behavior=alternate width=65 height=90>迎</MARQUEE><FONT color=#ffff00><MARQUEE direction=up behavior=alternate width=65 height=100>朋</MARQUEE><FONT color=#00ff00><MARQUEE direction=up behavior=alternate width=65 height=90>友</MARQUEE><FONT color=#00ffff><MARQUEE direction=up behavior=alternate width=65 height=100>光</MARQUEE><FONT color=#9932cc><MARQUEE direction=up behavior=alternate width=65 height=90>临</MARQUEE></b></center>
补充术语解释:
width=字中心距 height=跳动高度
2、图片编码实例
1)图片加朦胧效果(无边眶)
- <P align=center><table border=0><td><img src="http://www.wawdzg.net/image/119.jpg" width=300 height=300 style=filter:Alpha(opacity=100,style=2)><td></table></p>
复制代码 显示效果(圆形虚影):
< align=center><table border=0><td><img src="http://www.wawdzg.net/image/119.jpg" width=380 height=300 style=filter:Alpha(opacity=100,style=2)><td></table></p>
filter:过滤去除
Alpha: 边的形状
opacity:不透明(等于的数值表示圆的直径或矩形的边长
style 类型(=1:半虚影;=2:圆形虚影; =3:方形虚影)
图片加朦胧效果(有边眶)
- <CENTER><TABLE border=8><TBODY><TR><TD><IMG style="FILTER: Alpha(opacity=100,style=3)" src="http://www.wawdzg.net/image/119.jpg" width=380 align=center wmode="transparent" quality="high" type="application/octet-stream"></TD></TR></TBODY></TABLE></CENTER>
复制代码 显示效果(方形虚影):
<CENTER><TABLE border=8><TBODY><TR><TD><IMG style="FILTER: Alpha(opacity=100,style=3)" src="http://www.wawdzg.net/image/119.jpg" width=380 align=center wmode="transparent" quality="high" type="application/octet-stream"></TD></TR></TBODY></TABLE></CENTER>
3、主屏随动图
- <DIV STYLE="cursor:arrow;filter : progid:DXImageTransform.Microsoftpadding:8px;position:absolute;;border:;top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-120);left:expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-280);text-align:right;"><a href="http://wanruo.jahee.com" target="_blank"><img border="0"src="http://zjsck.chinacatholic.org/gifku/pigeon/pigeon015.gif";;;></a></font></DIV>
复制代码 显示效果:见本贴已显示的“白鸽衔枝”。
<DIV STYLE="cursor:arrow;filter : progid XImageTransform.Microsoftpadding:8px;position:absolute;;border:;top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-120);left:expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-280);text-align:right;"><a href="http://wanruo.jahee.com" target="_blank"><img border="0"src="http://zjsck.chinacatholic.org/gifku/pigeon/pigeon015.gif";;;></a></font></DIV>
|
|