启野的博客

淡淡的雾，淡淡的雨，淡淡的云彩悠悠的游。

日志

关于我

启野

B型天秤座

文章分类

HTML文字特效代码(一)

2008-10-28 01:07:11| 分类： HTML专区 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

十二星座导航目录caogao - 启野 - 启野的博客

HTML代码对文字的处理

HTML文字代码

1、基本语法：

插入文字</P

2、属性如下：

（1）align=center　表示字体居中，可选值为居右（right）居左（left）

（2）color=颜色代码　ff0000（红色） 00ff00（绿色） 0000ff（蓝色） 000000（黑色） ffffff（白色）

还可以改变数值，变化出若干种颜色，如:ff5577， 33ff99， 8855ff，数值不同，颜色就不同了。

例如，红色就表示为：color=#ff0000

（3）face=字体　说明：需要什么字体就输入什么字体几个字，如，我要“华文行楷”，就表示为：face=华文行楷

（4）size=字体大小如，size=1 size=2 size=5

3、效果：

衣带渐宽终不悔，为伊消得人憔悴

衣带渐宽终不悔，为伊消得人憔悴

HTML设置大字体的文字

1、基本语法：

插入文字

2、属性如下：

font:30pt　数值越大文字就越大

3、效果：

衣带渐宽终不悔，为伊消得人憔悴

衣带渐宽终不悔，为伊消得人憔悴

HTML设置可移动的文字

1、上下左右移动：

基本语法：

说明：移动速度数值，1最慢，数字越大越快。

属性如下：

direction=移动方向　可选值为向上（up）　向下（down）　向左（left）　向右（right）

（1）代入例子： direction=up（这是向上例子）

效果向上：

<marquee direction=up scrollamount=5>欢迎光临启野博客！</marquee>

欢迎光临启野博客！

（2）代入例子: direction=down（这是向下例子）

效果向下：

<marquee direction=down scrollamount=5>欢迎光临启野博客！</marquee>

欢迎光临启野博客！

（3）代入例子: direction=left（这是向左例子）

效果向左：

<marquee direction=left scrollamount=5>欢迎光临启野博客！</marquee>

欢迎光临启野博客！

（4）代入例子: direction=right（这是向右例子）

效果向右：

<marquee direction=right scrollamount=5>欢迎光临启野博客！</marquee>

欢迎光临启野博客！

2、设置不同移动效果的文字：

基本语法：

属性如下：

behavior=scroll 一圈一圈绕着走

behavior=slide 只走一次

behavior=alternate 来回走

效果：

（1）一圈一圈绕着走（behavior=scroll）：

<marquee behavior=scroll>欢迎光临启野博客！</marquee>

欢迎光临启野博客！

（2）只走一次（behavior=slide）

<marquee behavior=slide>欢迎光临启野博客！</marquee>

欢迎光临启野博客！

（3）来回走(behavior=alternate)：

<MARQUEE behavior=alternate>衣带渐宽终不悔，为伊消得人憔悴</MARQUEE>

衣带渐宽终不悔，为伊消得人憔悴

3、走走停停文字设置：

基本语法：

效果：

基本语法：

效果：

<marquee scrollAmount=100 scrollDelay=500>
欢迎光临启野博客！ </marquee>

欢迎光临启野博客！

HTML设计不同特效的文字

1、基本语法

效果：

<MARQUEE behavior=alternate direction=up height=350 scrollAmount=5><MARQUEE behavior=altrnate scrollAmount=2 width=660> <IMG src="http://img.blog.163.com/photo/VJjsmyR1zdRs-T98aY1H-A==/4296152569535650884.jpg">欢迎光临启野博客！</MARQUEE></MARQUE>

HTML文字特效代码(一) - 启野 - 启野的博客欢迎光临启野博客！

2、基本语法：

<MARQUEE height=50 width=350>插入文字</MARQUEE><MARQUEE direction=right height=50 width=350>插入相反的文字</MARQUEE>

提醒：在用这种效果时，文字移动范围的宽width的取值很重要，两段文字移动范转的width取值和一定要小于背景层width的取值。

效果：

<MARQUEE height=100 width=350>欢迎光临启野博客！</MARQUEE><MARQUEE direction=right height=50 width=350> ！客博野启临光迎欢</MARQUEE>

欢迎光临启野博客！！客博野启临光迎欢

3、基本语法：

插入文字

效果：

曾今沧海难为水，除却巫山不是云

曾今沧海难为水，除却巫山不是云

4、彩色字体基本语法：

心

儿

是

永

远

的

琴

弦

看看效果吧！

心儿是永远的琴弦

5、抛射字体基本语法：

<DIV style="FILTER: shadow(color=#FF3322, strength=60); WIDTH: 480px; HEIGHT: 121px">心在跳情在烧 </DIV></DIV>

看看效果吧!

心在跳情在烧

6、由中间向两边移动文字基本语法：

<MARQUEE height=250 width=400><IMG src="图片地址">由中间向两边移动的文字和图像</MARQUEE>

<MARQUEE direction=right height=250 width=400>由中间向两边移动的文字和图像<IMG src="图片地址"></MARQUEE>

看看效果吧!

<MARQUEE height=250 width=400><IMG src="http://img.blog.163.com/photo/uXX4tV0xKdNp4Awb28cTGg==/2026619832317098946.jpg">欢迎您来我家做客！</MARQUEE>

<MARQUEE direction=right height=250 width=400>！客做家我来您迎欢<IMG src="http://img.blog.163.com/photo/zrWLFBelbI_Xn0g9ev4QkA==/3389803144527412338.jpg"></MARQUEE>

HTML文字特效代码(一) - 启野 - 启野的博客欢迎您来我家做客！！客做家我来您迎欢

7、原地跳动文字基本语法：

大</MARQUEE>

家</MARQUEE>

来</CENTER></MARQUEE>

跳</MARQUEE>

跳</MARQUEE>

舞</MARQUEE>

</CENTER>

看看效果吧！

大家来跳跳舞

8、交替跳跃文字基本语法：

</MARQUEE>

</CENTER>

看看效果吧！

长风破浪会有时

9、穿梭文字基本语法：

看看效果吧！

嫣嫣

然然

一一 笑笑

10、左向右上下起伏飞翔文字基本语法：

左向右上下起伏飞翔， height=200 是上下起伏飞翔幅度，可以调整，区分图片大小，一般设置在50至150的范围内比较好。

<marquee direction=right><marquee behavior=alternate direction=up height=200>快乐着每一天! <img src=图片地址><img src=图片地址><img src=图片地址></marquee> </marquee>

看看效果吧！

<marquee direction=right><marquee behavior=alternate direction=up height=200>快乐着每一天！

</marquee>

</marquee>

快乐着每一天！
HTML文字特效代码(一) - 启野 - 启野的博客

11、右向左上下起伏飞翔基本语法：

右向左上下起伏飞翔，height=100 是上下起伏飞翔幅度，可以调整，区分图片大小，一般设置在50至150的范围内比较好

<marquee direction=left><marquee behavior=alternate direction=up height=150>对面的帅哥看过来！看过来！<img src=图片地址><img src=图片地址></marquee></marquee>

看看效果吧!

<marquee direction=left><marquee behavior=alternate direction=up height=200>对面的帅哥看过来！<img src= http://img.blog.163.com/photo/EAkDYRtUlI8049ZhXXYOfg==/1463669878895574533.jpg>看过来！<img src= http://img.blog.163.com/photo/EAkDYRtUlI8049ZhXXYOfg==/1463669878895574533.jpg>看过来！</marquee></marquee>

对面的帅哥看过来！ HTML文字特效代码(一) - 启野 - 启野的博客看过来！看过来！

12、基本语法：

<MARQUEE direction=up behavior=alternate width=60 height=120>海</MARQUEE></MARQUEE></CENTER></FONT

看看效果吧!

直挂云帆济沧海

13、彩光闪动文字的基本语法：

<TBODY>

<TR>

<TD style="FILTER: mask(color=#ff0000)" align=middle>启野欢迎您光临</TD></TR></TBODY></TABLE>

看看效果吧!(这是改动原代码后的效果)

启野欢迎您光临

14、文字在图片上向上移动的基本语法：

<TBODY>

<TR>

<TD>

她与他总是这样相隔千里

时间的，空间的，命运的手

轻拔着他们的机缘

他们一再错肩

</MARQUEE>

</TD>

</TR>

</TBODY>

</TABLE>

看看效果吧!

她与他总是这样相隔千里

时间的，空间的，命运的手

轻拔着他们的机缘

他们一再错肩

15、竖排渐出字基本语法：

<TBODY>

<TR>

伤离别，她的盛开注定是一场寂寞的独舞 当末世的繁华终于落成灰烬 媚香楼里东风渐呈凄切 当命运的风沙逼近眼前 她在月华下低了头 回想起最后的告别 她桃花般绚丽的脸爬满忧伤 如一张纠结的蛛网，刻画出惘然的皱纹 这一夜，没有月华如霜 他与她的作别，他的背影被马蹄踏碎 没有泪水，是雨丝淋湿了她送行的眼 这一世，他们再不会重逢 她的桃花盛开在他看不到的地方 她跳着舞，寂寞地，不见来时路…… </MARQUEE></MARQUEE></DIV>

</TD></TR>

</TBODY></TABLE>

注：复制浅绿色部分可以不要背景

看看效果吧!

伤离别，她的盛开注定是一场寂寞的独舞

当末世的繁华终于落成灰烬
媚香楼里东风渐呈凄切
当命运的风沙逼近眼前
她在月华下低了头
回想起最后的告别
她桃花般绚丽的脸爬满忧伤
如一张纠结的蛛网，刻画出惘然的皱纹

这一夜，没有月华如霜
他与她的作别，他的背影被马蹄踏碎
没有泪水，是雨丝淋湿了她送行的眼
这一世，他们再不会重逢
她的桃花盛开在他看不到的地方
她跳着舞，寂寞地，不见来时路……

16、让文字在背景图片上悠闲地飘飞：

在背景图片上悠闲飘飞的文字基本语法如下：

<TBODY>

<TR>

守望着爱人归来 </MARQUEE></MARQUEE>

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

说明：

A、图片地址自己输入；

B、文字、字体和颜色可以变动。

看看效果吧！

守望着爱人归来

17、立体镂空字基本语法：

启野梦幻剧场

</DIV>

看看效果吧！

启野梦幻剧场

18、让文字在背景图片上悠闲地飘飞

在背景图片上悠闲飘飞的文字基本语法如下：

<TBODY>

<TR>

日不落的爱恋

</MARQUEE></MARQUEE>

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

说明：

A、图片地址自己输入；

B、文字、字体和颜色可以变动。

看看效果吧！

日不落的爱恋

欢迎光临启野博客！

评论这张

转发至微博

阅读(8167)| 评论(2)

历史上的今天

this.p={ m:2,
 b:2,
 loftPermalink:'',
 id:'fks_085064093086085075092085083095083084084067083083082065',
 blogTitle:'HTML文字特效代码(一)',
 blogAbstract:' <TABLE border=\"0\" cellSpacing=\"0\" borderColor=\"#cccccc\" cellPadding=\"40\" width=\"95%\" bgColor=\"#33300\" align=\"center\" \> <TBODY\> <TR\> <TD\> <TABLE border=\"2\" cellSpacing=\"10\" borderColorLight=\"#000000\" borderColorDark=\"#808080\" cellPadding=\"5\" width=\"100%\" \> <TBODY\> <TR\> <TD height=\"27\" borderColorLight=\"#000000\" width=\"100%\" borderColorDark=\"#808080\" \>  </P\> <IMG title=\"十二星座导航目录caogao - 启野 - 启野的博客\" alt=\"十二星座导航目录caogao - 启野 - 启野的博客\" src=\"http://img100.ph.126.net/O5b7BPrtflBkZlQ7aEG1LA==/2050263730361464728.gif\" \></P\>  </P\> </SPAN\></P\></TD\></TR\></TABLE\></TD\></TR\></TABLE\>',
 blogTag:'html',
 blogUrl:'blog/static/7250754220089281711346',
 isPublished:1,
 istop:false,
 type:2,
 modifyTime:1328973726167,
 publishTime:1225127231346,
 permalink:'blog/static/7250754220089281711346',
 commentCount:2,
 mainCommentCount:1,
 recommendCount:1,
 bsrk:-100,
 publisherId:0,
 recomBlogHome:false,
 currentRecomBlog:false,
 attachmentsFileIds:[],
 vote:{},
 groupInfo:{},
 friendstatus:'none',
 followstatus:'unFollow',
 pubSucc:'',
 visitorProvince:'',
 visitorCity:'',
 visitorNewUser:false,
 postAddInfo:{},
 mset:'000',
 mcon:'',
 srk:-100,
 remindgoodnightblog:false,
 isBlackVisitor:false,
 isShowYodaoAd:false,
 hostIntro:'B型天秤座',
 hmcon:'1',
 selfRecomBlogCount:'0',
 lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
 }

{list a as x}
 {if !!x}
 <div class="iblock nbw-fce nbw-f40">
 <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
 {if x.visitorName==visitor.userName}
 <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
 {else}
 <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
 {/if}
 </a>
 <div class="cwd vname thide">
 {if x.moveFrom=='wap'}
 <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"> </a>
 {elseif x.moveFrom=='iphone'}
 <a class="noul pnt" target="_blank"> </a>
 {elseif x.moveFrom=='android'}
 <a class="noul pnt" target="_blank"> </a>
 {elseif x.moveFrom=='mobile'}
 <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"> </a>
 {/if}
 <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
 ${fn(x.visitorNickname,8)|escape}
 </a>
 </div>
 </div>
 {/if}
 {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

推荐过这篇日志的人：
 <div>
 {list a as x}
 {if !!x}
 <div class="iblock nbw-fce nbw-f40">
 <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
 <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
 </a>
 <div class="cwd thide">
 <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
 ${fn(x.recommenderNickname,6)|escape}
 </a>
 </div>
 </div>
 {/if}
 {/list}
 </div>
 {if !!b&&b.length>0}
 他们还推荐了：
 <ul>
 {list b as y}
 {if !!y}
 <li class="rrb">·<a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/7250754220089281711346">${y.recommendBlogTitle|escape}</a></li>
 {/if}
 {/list}
 </ul>
 {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
 {if !!x}
 <div class="hotItem iblock nbw-fce nbw-f40">
 <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
 {if x.publisherUsername==visitor.userName}
 <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
 {else}
 <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
 {/if}
 </a>
 <div class="cwd vname thide">
 <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
 ${fn(x.publisherNickname,8)|escape}
 </a>
 </div>
 <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
 </div>
 {/if}
 {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

启野的博客

导航

日志

HTML文字特效代码(一)

历史上的今天

最近读者

热度

评论

页脚