HTML语言学习笔记(一):文字特效处理
时间:2014-8-23 10:49 作者:admin 分类: 代码人生
在学习HTML文字特效处理之前,应该先阅读:Html语言解析
对于不熟悉洋文的人来说,HTML确实难。但只要你有悟性、有恒心,静下心来慢慢学,对每个问题琢磨琢磨、捣鼓捣鼓,肯定能学会。 下面一步一步来:
1、写字:点日志---写日志---全部功能---<>---进入HTML编辑状态。写你要展现的字,如:欢迎您光临Mrxn的博客!!
2、确定字体: FONT表示文字的属性; face表示字体;即<FONT face=隶书> 欢迎您光临Mrxn的博客!!“=”号后填选择的字体,你想选什么字体,就填什么字体; 这个尖括号“<>”,是不能省掉的,而且代码必须写在这个尖括号之内。
3、确定文字大小: size表示字的大小,即:<FONT face=隶书 size=5> 欢迎您光临Mrxn的博客!!“5”是取的值,可以变化,数字越大字越大。
4、确定文字颜色:color表示颜色;颜色的代码为:# xxxxxx。 代码是:color=#ff0000 即:<FONT face=隶书color=#ff0000 size=5> 欢迎您光临Mrxn的博客!!
另外需熟记的几个颜色代码:红色:ff0000 绿色:00ff00 蓝色:0000ff 黑色:000000 白色:ffffff 要记住:颜色代码编入HTML语言中时可别忘了写“#”。
其它颜色代码请参看:颜色代码表
预览一下,看是不是红色:
欢迎您光临Mrxn的博客!!
5、文字加粗:好,红色字显示出来了,但有点瘦。在用WODE处理中文时我们用“B”可使文字丰满。试试:<FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> 。再加上文字属性结束符号 </FONT > 就变为:<FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT >
看看效果:
欢迎您光临Mrxn的博客!!
6、移动文字:文字丰满了,如果能移动不更漂亮吗? 好办,就在所有代码的前面加一个移动代码<marquee>, 再在所有代码和文字的最后加一个移动代码</marquee> , 注意多了一个“/” 。即:<marquee> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
看看效果:
注意两点;一是这个移动代码<marquee>默认向左移动;二是要点右上角“预览”才能动起来。
移动 属性如下:
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)
向右移动:<marquee direction= right> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
左右来回移动:<marquee behavior=alternate> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
向上移动:<marquee direction= up> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
向下移动:<marquee direction= down> <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
上下来回移动:<marquee direction= down behavior=alternate > <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
注意:使用“direction= up behavior=alternate”也可得此效果。
7、调整移动速度: 代码是:scrollamount=1 “1”是可变值,数值越大越快。
这个代码加在哪里?因为它是属于移动这一属性的,所以就要写在移动代码一起。即:<marquee direction= up scrollamount=1 > <FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee> 看看效果:
8、调整文字位置:那就加一个表示位置的代码:
<p align=center> 表示字体居中
<p align=left> 表示字体居左
<p align=right> 表示字体居右
即:<marquee direction= up scrollamount=1 > <p align=center><FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
注意:这一位置代码不能和FONT这一属性的写在一起,因为不是同一属性,只能另放在<FONT ...... </FONT > 这一属性的前面。
看看效果吧!是不是居中了.?
欢迎您光临Mrxn的博客!!
9、走走停停文字设置:
基本语法:
<marquee scrolldelay=500 scrollamount=100>插入文字</marquee>
即: <marquee scrolldelay=500 scrollamount=100><FONT face=隶书 color=#ff0000 size=5> <B>欢迎您光临Mrxn的博客!!</B> </FONT > </marquee>
效果:
10、跳跃式移动(即上下来回移动+左右来回移动): <MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
<MARQUEE scrollAmount=2 behavior=alternate width=660><IMG src="http://xianyangygdz.blog.163.com/图片地址"><FONT face=楷体_gb2312 color=red size=6>插入文字</FONT></MARQUEE></MARQUE></MARQUEE>
上下来回移动代码:<MARQUEE scrollAmount=5 direction=up behavior=alternate height=150>
左右来回移动代码:<MARQUEE scrollAmount=2 behavior=alternate width=660>
11、 上下两行文字相向移动:
<P align=center><FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=350>插入文字</FONT></MARQUEE></P><FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE></FONT></FONT></P>
上行文字代码:<FONT color=#0096ff face=隶书 size=7><MARQUEE height=50 width=350>插入文字</FONT></MARQUEE>
下行文字代码:<FONT color=#0000ff face=隶书 size=7><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE></FONT>
提醒:在用这种效果时,文字移动范围的宽width的取值很重要,两段文字移动范转的width取值和一定要小于背景层width的取值。
效果如下:
12、由中间向两边移动文字:在上例"11"中取掉上下行中间的“</P>”,就可变为在同一水平线上由中间向两边移动的文字。为了美观,再在文字前加个图片,即为:<P align=center><FONT face=隶书 color=#ff0000 size=5>
<MARQUEE width=350 height=50><IMG src="图片地址">欢迎您光临Mrxn的博客!!</MARQUEE></FONT></MARQUEE></MARQUEE><FONT face=隶书 color=#c000c0 size=5><MARQUEE direction=right width=350 height=50>!!客博的虎老临光您迎欢<IMG src="图片地址"></MARQUEE></FONT></FONT></P>
效果漂亮吧?
由两边向中间移动文字:
<P align=center><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE direction=right width=280 height=50>!!客博的nxrM临光您迎欢<IMG style="CURSOR: pointer" src="http://img.blog.163.com/photo/joeubzjS_MRGXKeH6hAGog==/2010857233621410887.jpg" bbimg(this)?></MARQUEE></FONT></MARQUEE><FONT face=华文彩云 color=#ee110e size=5>
<MARQUEE width=280 height=50><IMG style="CURSOR: pointer" src="http://img.blog.163.com/photo/wpc64e02arvSPnFzjjAXuA==/5397564153404060463.jpg" bbimg(this)?>欢迎您光临Mrxn的博客!!</MARQUEE></FONT></MARQUEE></P>
13、原地跳动文字基本语法:
<DIV></DIV></B>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; COLOR: #0033ff; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>原</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>地</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>跳</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>动</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>文</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=60 height=120>
<CENTER><B>字</B></CENTER></MARQUEE></FONT></CENTER>
14、交替跳跃文字基本语法:
<DIV></DIV>
<CENTER><FONT style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 100%; COLOR: #ff6600; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<MARQUEE direction=up behavior=alternate width=80 height=160>
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>欢</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80>
<CENTER><B>迎</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80 height=160>
<CENTER><B>您</B></CENTER></MARQUEE>
<MARQUEE direction=up behavior=alternate width=80>
<CENTER><B>!</B> </CENTER></MARQUEE></FONT></CENTER>
15、右向左上下起伏飞翔基本语法:
<MARQUEE>
<MARQUEE direction=up behavior=alternate height=150><IMG src="图片地址"><IMG src="图片地址"><FONT face=华文行楷 color=#0000ff size=5>填写文字</B></FONT></MARQUEE></MARQUEE>
右向左上下起伏飞翔,height=100 是上下起伏飞翔幅度,可以调整,区分图片大小,一般设置在50至150的范围内比较好
16、左向右上下起伏飞翔文字基本语法:
<marquee direction=right><marquee behavior=alternate direction=up height=200><font color=0000ff size=4 face=华文行楷><b>!去回快</b></font><br><img src=图片地址><img src=图片地址><img src=图片地址></marquee><br></marquee>
左向右上下起伏飞翔, height=200 是上下起伏飞翔幅度,可以调整,区分图片大小,一般设置在50至150的范围内比较好。
17、原地跳高跳低基本语法:
<CENTER><FONT face=隶书 color=red size=25>
<MARQUEE direction=up behavior=alternate width=60 height=120>虚</MARQUEE>
<FONT color=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=80>拟</MARQUEE>
<FONT color=brown>
<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=orange>
<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=yellow>
<MARQUEE direction=up behavior=alternate width=60 height=120>幸</MARQUEE>
<FONT color=orange>
<MARQUEE direction=up behavior=alternate width=60 height=80>福</MARQUEE>
</FONT></B></MARQUEE></FONT></CENTER></FONT
18、设置大字体的文字:
(1)、基本语法:
<font style=font:30pt face=新宋体 color=#ff0000>插入文字</font>
(2)、属性如下:
font:30pt 数值越大文字就越大
(3)、效果:
相逢是缘 相思是福
19、彩色字体基本语法:
<P align=center><STRONG><FONT size=6><FONT face=华文新魏><FONT color=#ff0000>彩
</FONT><FONT color=#ff8900>色</FONT><FONT color=#92c000>文</FONT><FONT color=#00c024>字</FONT><FONT color=#00c0da>色</FONT><FONT color=#0053ff>彩</FONT><FONT color=#AO00ff> 斑</FONT><FONT color=#ff00ff>斓</FONT></FONT></FONT></STRONG></P>
代码说明:<strong>是用作重点强调的,其文本通常以粗体显示。
看看效果吧!
彩色文字色彩斑斓
20、文字阴影、投影效果:
(1)、文字阴影效果:
<DIV align=center>
<DIV style="FONT-SIZE: 35pt; FILTER: shadow(color=阴影颜色代码,direction=阴影方向); WIDTH: 400px; COLOR: 文字颜色代码; LINE-HEIGHT: 150%; FONT-FAMILY: 字体; HEIGHT: 51px">
<DIV align=center><B>文字内容</B></DIV></DIV></DIV>
说明:FILTER: shadow滤镜效果是沿对象边缘产生阴影。
抛射字体基本语法:
<DIV align=center>
<DIV style="FILTER: shadow(color=#FF9999
strength=60); WIDTH: 480px; HEIGHT: 121px"><FONT face=华文彩云 color=#ff0000 size=7>
<B>
<CENTER>抛射字体</B></CENTER></FONT>
<DIV align=left><BR><BR></DIV></DIV></DIV>
<P align=left> </P>
看看效果吧!
(2)、文字定点投影效果:
<TABLE style="FILTER: dropshadow(color=阴影颜色代码,offx=3,offy=3,positive=true)" align=center><FONT face=字体 color=文字颜色代码 size=字号><B>文字内容</B></FONT>
<TBODY></TBODY></TABLE>
说明: FILTER: dropshadow滤镜可使对象在指定的方向和位置上产生阴影。阴影相对于对象的位置可通过offx和offy来设定。
文字定点投影效果
文字浮雕效果:
<TABLE style="FILTER: dropshadow(color=#6699FF, offx=1, offy=1, positive=1)" align=center><FONT face=隶书 color=#ffffff size=7>文字浮雕效果</FONT>
<TBODY></TBODY></TABLE>
文字浮雕效果
(3)、投影字体效果:
<DIV align=center>
<DIV style="FONT-WEIGHT: bolder; FONT-SIZE: 40px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px" align=center><Font color=文字颜色代码 face=字体>
<DIV align=center><B>文字内容</B></DIV></Font></DIV></DIV>
说明:FILTER: blur滤镜可使对象在指定的方向和位置上产生动感模糊效果。font-weight为文字浓淡粗细属性,可用normal、bold、bolder、light、lighter及数值100-900来表示。
文字模糊效果:
<TABLE style="FILTER: blur(add=true,direction=135,strength=30)" align=center><FONT face=黑体 color=#ee00ee size=6><B>文字模糊效果</B></FONT>
<TBODY></TBODY></TABLE>
文字模糊效果
立体镂空字基本语法:
<DIV style="FILTER: shadow(color=#ff4400, strength=40); WIDTH: 708px; HEIGHT: 483px"><FONT size=3><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 150pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000>虚拟</FONT><BR></FONT></DIV>
21、日志美术字:
(1)、<DIV style="FILTER: shadow(color=dcdcdc); COLOR: black; HEIGHT: 5px">日志美术字</FONT></DIV>
(2)、<DIV style="FILTER: shadow(color=c0c0c0); HEIGHT: 1px"><PRE> <FONT face=黑体 color=deeppink size=4><B>日志美术字</B> </FONT></PRE></DIV>
日志美术字
(3)、<DIV style="FONT-WEIGHT: bold; FONT-SIZE: 16pt; FILTER: Shadow(Color=#dcc4c4,Direction=135); WIDTH: 131px; COLOR: #0000cd; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书; HEIGHT: 40px; writing: tb-rl">日志美术字</DIV>
(4)、<DIV style="FILTER: shadow(color=deeppink); HEIGHT: 5px"><SPAN style="FILTER: shadow(color=c0c0c0); HEIGHT: 1px"><FONT face=幼圆 color=#000000 size=5><B>日志美术字</B> </FONT></DIV></SPAN>
(5)、<DIV style="FONT-SIZE: 14pt; FILTER: shadow(color=black,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 12px">日志美术字</DIV> </DIV>
(6)、<DIV style="FONT-SIZE: 14pt; FILTER: shadow(color=3399ff,direction=135); WIDTH: 100%; COLOR: white; HEIGHT: 12px">日志美术字</DIV>
(7)、<DIV style="FILTER: glow(color=9400de); COLOR: #ffffff; HEIGHT: 14px">日志美术字 </DIV>
(8)、<DIV style="FONT-SIZE: 12pt; FILTER: Glow(color=006363,
strength:2); WIDTH: 100%; COLOR: #ffffe6; FONT-FAMILY: 黑体; HEIGHT: 20px">日志美术字</DIV>
(9)、<DIV style="FONT-SIZE: 14pt; FILTER: glow (color=blue,strength:2); WIDTH: 100%; COLOR: #ff0000; HEIGHT: 20px; valign: bottom"><STRONG><BIG>日志美术字</BIG></STRONG></DIV>
22、带背景色文字效果:
<DIV align=center>
<DIV style="FONT-SIZE: 27pt; FONT-FAMILY: 字体; WIDTH: 背景宽度; BACKGROUND-COLOR: 背景颜色代码">文字内容</DIV></DIV>
说明:font-family为字体属性,font-size为文字大小属性。
23、文字反转效果:
(1)、左右反转效果:
<TABLE style="FILTER: FlipH" align=center>
<FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>
说明:FILTER: FlipH表示沿水平方向翻转对象的滤镜效果。
文字左右反转
(2)、上下反转效果:
<TABLE style="FILTER: FlipV" align=center>
<FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>
说明:FILTER: FlipV表示沿垂直方向翻转对象的滤镜效果。
文字上下反转
(3、)倒影字效果:
<DIV align=center><FONT face=华文行楷 color=#ff0033 size=6><B>倒影代码</B></FONT></DIV>
<TABLE style="FILTER: FlipV; LINE-HEIGHT: 100%" align=center><FONT face=华文行楷 color=#ff0033 size=6><B>倒影代码</B> </FONT>
<TBODY></TBODY></TABLE>
倒影代码
<DIV style="FONT-SIZE: 35pt; WIDTH: 100%; COLOR: green;
FONT-FAMILY: 华文新魏" align=center>
<B><EM>老虎的倒影代码</EM></B></DIV>
<DIV style="FONT-SIZE: 35pt; FILTER: FlipV; WIDTH: 100%; COLOR: blue; FONT-FAMILY: 华文新魏" align=center>
<B><EM>老虎的倒影代码</EM></B></DIV>
24、空心字效果:
<TABLE style="FILTER: glow(strength=1) mask(color=#ff0033) chroma(color=#ff0033)"
align=center><FONT face=字体 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>
说明:空心字是用滤镜glow、mask、chroma组合,mask和chroma的颜色要相同,这个颜色决定了字体的颜色。
空心字效果
25、阴、阳文字效果:
(1)、阴文字效果:
<TABLE style="FILTER: mask(color=文字颜色代码) shadow(color=阴影颜色代码,direction=135) chroma(color=文字颜色代码)" align=center><FONT face=字体 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>
说明:阴文字是用滤镜mask,shadow,chroma组合。字体的颜色由shadow决定,mask和chroma的颜色要相同,色彩任意。
阴文字效果
(2)、阳文字效果:
<TABLE style="FILTER: mask(color=#a09261) dropshadow(color=#000000,offx=-3,offy=-3,positive=1) chroma(color=#a09261)" align=center><FONT face=字体 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>
说明:阳文字是用滤镜mask,dropshadow,chroma组合。mask和chroma的颜色相同,色彩由dropshadow决定。
阳文字效果
26、齿边字效果;
<TABLE style="FILTER: glow(strength=30) mask(color=blue)" align=center><FONT face=字体 size=字号>文字内容</FONT> <TBODY></TBODY></TABLE>
说明:齿边字是用滤镜glow,mask组合,mask的颜色决定字体的颜色。
齿边字效果
27、文字光晕效果:
<DIV style="FONT-SIZE: 35pt; FILTER: glow(color=光晕颜色代码,strength=5); WIDTH: 100%; COLOR: 文字颜色代码; LINE-HEIGHT: 150%; FONT-FAMILY: 字体" align=center>
<DIV align=center><B>文字内容</B></DIV></DIV>
说明:strength表示光晕强度
28、文字透明、渐变效果:
(1)、文字透明效果:
<TABLE style="FILTER: alpha(opacity=10,finishopacity=20,sytle=2,startx=1,starty=1,finishx=100,finishy=100)" align=center><FONT face=字体 color=文字颜色代码 size=字号>文字内容</FONT>
<TBODY></TBODY></TABLE>
说明:opacity:表示文字起始透明度,有效范围是0-100;100是完全不透明,0是完全透明。
finishOpacity:表示文字结束透明度,有效范围是0-100;100是完全不透明,0是完全透明。
style:表示文字滤镜样式,可更改等号后面参数:0-平均透明;1-线状渐变透明;2-圆形渐变透明;3-菱形(X形)渐变透明。
startx、startx、finishx、finishy分别表示文字滤镜效果的起始和结束位置。
文字透明效果
(2)、文字渐变效果:
<DIV style="FONT-SIZE: 35pt; FILTER: alpha(opacity=100,style=1); WIDTH: 100%; COLOR: 字体颜色代码; LINE-HEIGHT: 100%; FONT-FAMILY: 字体" align=center>文字内容</DIV>
说明:LINE-HEIGHT: 为行间距。
29、文字波纹效果:
(1)、文字波浪效果:
<DIV style="FONT-SIZE: 35pt; FILTER: wave(add=0,lightstrength=50,strength=3,freq=2,phrase=10); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 100%; FONT-FAMILY: 字体" align=center><B>文字内容</B> </DIV>
说明:add属性:布尔型,0或1,0表示将原始对象加入最后效果中,1则反之;freq属性:决定显示的频率,即应出现多少个波形;phrase属性:决定波形的形状,值取0至360之间;strength属性:决定波形的振幅(扭曲强度)。
(2)、文字扭曲效果:
代码格式:与文字波浪效果的性质相同,均为同一种滤镜效果,只是参数设置不同罢了。
<DIV align=center><DIV style="FONT-SIZE: 35pt; FILTER: Wave(freq=17,strength=3,lightstrength=1,phase=0); WIDTH: 300px; LINE-HEIGHT: 15pt; FONT-FAMILY: Verdana; HEIGHT: 20px" align=center><FONT face=华文行楷 color=#ff0033><STRONG><B>扭曲文字效果</B></STRONG></FONT></DIV></DIV>
30、彩光闪动文字的基本语法:
<TABLE align=center background=http://img.blog.163.com/photo/eHaHkYknewet3nHzUNS3RQ==/3702803318628988464.jpg border=5>
<TBODY>
<TR>
<TD style="FILTER: mask(color=#000000)" align=middle><FONT style="FONT-SIZE: 50pt" face=隶书 color=#336699><B>老虎欢迎您的光临</B></FONT></TD></TR></TBODY></TABLE>
虚拟欢迎您的光临 |
再作个火焰燃烧效果:
虚拟欢迎您的光临 |
|
<TABLE borderColor=#cd5c5c height=100 width=400 align=center border=3>
<TBODY>
<TR>
<TD background=http://img.blog.163.com/photo/PFDxwoiNrj8piPXB9KhTiQ==/3702803318628988463.jpg>
<P align=center>
<MARQUEE scrollAmount=3 behavior=alternate width=500><IMG alt="" src="http://img.blog.163.com/photo/hVkuquHNeKNqc4o21FiEFw==/4240139049169747688.jpg"><FONT color=#ff0000 size=6><B>虚拟欢迎您!</B><IMG alt="" src="http://img.blog.163.com/photo/hVkuquHNeKNqc4o21FiEFw==/4240139049169747688.jpg"></FONT></MARQUEE></P></TD></TR></TBODY></TABLE>
|
(带背景的闪光字体)
<TABLE cellSpacing=0 cellPadding=0 align=center background=文字内闪光图片地址>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699)">
<TABLE align=center background=文字的背景图片地址>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 56pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=字体 color=#336699><B>带背景的闪光字体</B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
说明:实际上是使用了两层表格达到的效果。font-style为字体风格属性,font-variant为字体变量属性(这个属性有两个值,normal和small-caps,normal是缺省值);font-weight为文字浓淡粗细属性。
31、文字在图片上向上移动的基本语法 :
<DIV style="PADDING-RIGHT: 0px; MARGIN-TOP: 10px; FONT-SIZE: 9pt; OVERFLOW-X: hidden; WIDTH: 97%; WORD-BREAK: break-all; TEXT-INDENT: 24px; LINE-HEIGHT: normal; HEIGHT: 200px; WORD-WRAP: break-word" auto?>
<P align=center><BR>
<TABLE height=390 cellSpacing=0 cellPadding=0 width=550 align=center background=http://img.blog.163.com/photo/ADCF8YQn4AeGVOsgxhfg6g==/879609302221279143.jpg border=3>
<TBODY>
<TR>
<TD>
<P align=center>
<MARQUEE scrollAmount=3 direction=up>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>朋友您好!</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>亲自动手!</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>体验成功!</FONT></P>
<P align=center><FONT face=华文行楷 color=#ff0000 size=8>其乐无穷!</FONT></P></MARQUEE></P></TD></TR></TBODY></TABLE></P></DIV>
32、竖排渐出字基本语法:
<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=550 height=293>
<MARQUEE style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100 direction=up width=550 height=290>
<P align=left><FONT style="FONT-SIZE: 18pt; FILTER: WIDTH: 100%; COLOR: #ea0000; LINE-HEIGHT: 130%; FONT-FAMILY: 方正姚体" color=#ff0000>我带着远古的心愿<BR>你怀揣前世的祈盼<BR>我饱含如许的虔诚<BR>你浸润最深的期待<BR>我们跨越万水千山<BR>赴今世的约定...<BR>你感觉我深情凝眸的甜柔<BR>我倾听你心室澎湃的跳动<BR>白云轻盈飘荡<BR>星月神秘闪烁<BR><BR>燃烧的篝火旁<BR>我们席地而坐<BR>倾诉不尽的相思<BR>燃烧的火焰是不灭的炙热<BR>让我们一起出发<BR>背上快乐的行囊<BR>携着一路的欢唱<BR>踏着灿烂的芬芳<BR>望--天上云卷霞飞<BR>看--地下小桥流水<BR>拥--郁郁山川入怀<BR>枕--簇簇波浪入眠<BR>把--忧烦抛在身后<BR>让--愉悦洒满诗行 <BR><BR></FONT></P></MARQUEE></MARQUEE></DIV>
看看添加背景后的效果:
|
方法是:将第32例的所有代码嵌入下面的代码中,然后在“背景图片地址”处换上你所喜欢的图片地址,调整一下图片的宽度和高度,合适为止。
<DIV></DIV>
<TABLE borderColor=#cd5c5c height=350 width=450 align=center border=3>
<TBODY>
<TR>
<TD background=背景图片地址>第32例的所有代码</TD></TR></TBODY></TABLE>
33、让文字在背景图片上悠闲地飘飞 :
<DIV></DIV>
<TABLE borderColor=#a000ff height=350 width=450 align=center border=3>
<TBODY>
<TR>
<TD background=图片地址>
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=350>
<MARQUEE scrollAmount=3 behavior=alternate width=450>
<P align=center><FONT face=隶书 color=#ff0000 size=6 ff><B>写文字 </B></FONT></P></MARQUEE></MARQUEE></TD></TR></TBODY></TABLE>
说明:
A、图片地址自己输入;
B、文字、字体和颜色可以变动。
学海无涯苦作舟 |
推荐阅读: