注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

美好宁静之光

美好的回忆从这里开始......

 
 
 

日志

 
 

觅真文字代码学习备忘录  

2010-04-16 16:54:25|  分类: 移动字制作 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

沧海觅真觅真文字代码学习备忘录

 HTML是由WEB的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种超文本标记式语言。HTML语言是所有网页的基础,是一切网页制作的源代码,它可以融文字、图片、表格、超链接和表单控件等一切元素于一体;通过书写HTML语言,足以制作色彩绚丽内容翔实的网页。

现在仅就HTML语言中最重要也是最根本的代码——文字代码进行一下整理: 

(一)文字代码属性命令

文字标记格式为<font>插入文字</font>

一般文字代码属性

字体加粗:<b>文字</b>

字体斜体:<i>文字</i>

字体下划线: <u>文字</u>

字体删除线: <s>文字</s>

字体大小:<h1>文字</h1>   大小从h1-h5不等

align:文字对齐属性即处于的位置,align=center 表示字体居中,可选为居右(right)或居左(left)  

face=字体   常用字体为 幼圆 隶书 方正舒体 华文新魏 华文行楷 华文细黑 宋体.黑体.楷体 仿宋.新宋体.细明体.华文彩云 等

size=字体大小, size= 1 最小,size= 7 最大。

color=颜色代码  可以使用命名顏色(如yellow, red)或是十六进位字码(如#FFFF00,#FF0000)

特效文字代码属性

<strong></strong>代表粗字体。

strength表示强度(如发光效果等) 

<marquee>文字</marquee> 滚动文字标记

direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right) ; direction又解释为投影角度

BGCOLOR=颜色代码  滚动背景颜色属性  

scrollamount=移动速度数值 或做跳动幅度讲

scrolldelay="500" 滚动延时属性 是文字卷动的停顿时间,单位是毫秒(IE默认值为60 ),数值越小移动的速度越快

behavior滚动方式属性 (滚动效果:behavior=scroll 一圈一圈绕着走 behavior=slide 只走一次

behavior=alternate 来回走)

LOOP这是指定文字滚动的循环次数。当LOOP=-1或LOOP=INFINITE时,则表明文字滚动是无限循环。 

HSPACE、VSPACE 滚动空间属性 HSPACE是水平方向距左端的距离,VSPACE是垂直方向距上端的距离

writing-mode 设置书写方向方式的属性  tb-lr:表示文字从上往下,从右向左排列;lr-tb则表示文字从左向右,从上往下排列

(二)常见文字代码

1 一般的文字代码

<P align=left><FONT color=red face=隶书 size=5>沧海觅真欢迎您</FONT></P>

2 字体较大的文字代码

<FONT  style="FONT-SIZE: 50pt"  face=黑体 color=yellow>沧海觅真欢迎您</FONT>

3 平躺的文字代码

<FONT  style="FONT-SIZE: 50pt"  face=@黑体 color=yellow>沧海觅真欢迎您</FONT>

4.镂空文字代码

<CENTER><FONT style="FONT-SIZE: 60pt; FILTER: glow(color=green); WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>沧海觅真 祝您快乐</B></FONT></CENTER>

5.跳动文字代码
<MARQUEE scrollAmount=5 direction=up behavior=alternate height=98>
<MARQUEE scrollAmount=2 behavior=altrnate width=460><FONT face=楷体_gb2312 color=red size=7>沧海觅真欢迎您</FONT></FONT></MARQUEE></MARQUE>

6.风掠过特效文字代码

<font style="font-size:70pt;filter:blur(add=1,direction=90,strength=75);width:100%; color:blue;line-height:150%;font-family:华文行楷"><b> 沧海觅真 祝您快乐</b></font>

7 左右翻转的文字特效代码
<p align=right><FONT
style="FONT-SIZE:50pt;filter:FlipH(color=silver);WIDTH:100%;
COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>沧海觅真欢迎您</B></FONT></p>

8 倒贴文字特效代码
<FONT style="FONT-SIZE:50pt;filter:FlipV(color=silver);WIDTH:100%;
COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>沧海觅真欢迎您</B></FONT>

9 彩色阴影特效文字代码

<font style="font-size:80pt;filter:dropshadow(color=yellow,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:黑体"><b>沧海觅真欢迎您</b></font>

10 半透明文字代码

 <DIV style="FONT-SIZE: 50pt; FILTER: Alpha(opacity=80,finishOpacity=20,style=2); WIDTH: 500px; COLOR: blue; LINE-HEIGHT: 79pt; HEIGHT: 60px">沧海觅真欢迎您</DIV>

11.波浪字体代码

<span style="font-size:60pt;display:block;text-align:center;color:darkblue;filter:wave(add=t,freq=5,lightstrength=5,phase=0,strength=5);height:1">沧海觅真欢迎你</span>

12 套边立体感特效文字代码

<font style="font-size:90pt;filter:glow(color=blue,strength=4);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>沧海觅真欢迎你</b></font>

13.长尾投影文字代码

<DIV align=center>
<DIV style="FILTER: shadow(color=yellow  , strength=60); WIDTH: 720px; HEIGHT: 221px"><FONT face=华文彩云 color=red size=8><B>
<CENTER>★沧海觅真★ <BR>★欢迎朋友的光临★ <BR>★你的到来是对我的最大支持★</CENTER></B>
<CENTER></CENTER></FONT></DIV></DIV>
<DIV></DIV>

14 凸起立体感特效文字代码

<font style="font-size:90pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:华文行楷"><b>沧海觅真欢迎你的光临</b></font>

15 雕刻凸起字代码

<div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.9);height:1;font-family:impact;font-size:90pt;COLOR: yellow;background-color:red"><p align="left">沧海觅真欢迎你</div> 

16 彩色渐变文字代码

<P align=center><STRONG><FONT size=7><FONT face=黑体><FONT color=#92c000>觅</FONT><FONT color=#00c024>真</FONT><FONT color=#00c0da>欢</FONT><FONT color=#0053ff>迎</FONT><FONT color=#4800ff>你</FONT></FONT></STRONG></P> 

17 借助闪光背景制作的闪光文字代码

<TABLE cellSpacing=0 cellPadding=0 align=center background=http://img.bimg.126.net/photo/ioH5mGHNMS2aNVUzFuR_Aw==/4298685844325534498.jpg border=2>
<TBODY>
<TR>
<TD style="FILTER: chroma(color=#336699">
<TABLE align=center bgColor=#ffffff>
<TBODY>
<TR>
<TD align=middle><FONT style="FONT-SIZE: 85pt" face=华文行楷 color=#336699><B>沧海觅真 祝你快乐 </B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

18.左右往复滚动代码
<MARQUEE style="FONT-SIZE: 50pt; FILTER: glow(color=red); WIDTH: 100%; COLOR: yellow; LINE-HEIGHT: 160%; FONT-FAMILY: 华文彩云" scrollAmount=3 behavior=alternate FONT>★沧海觅真欢迎你的光临!★ </FONT></MARQUEE></P>

19 文字上下左右移动的特效代码
<marquee direction=up scrollamount=3>沧海觅真看你来了</marquee>
direction=移动方向 可选值为向上(up) 向下(down) 向左(left) 向右(right)

20.多列横排左右移动的文字代码

<MARQUEE style="FONT-SIZE: 25pt; FILTER: glow(color=yelow); WIDTH: 100%; COLOR: #ffcc00; LINE-HEIGHT: 160%; FONT-FAMILY: 华文彩云" scrollAmount=3 behavior=alternate FONT><SPAN style="BACKGROUND-COLOR: #0000ff">★痴心兰花登山采★<BR>★归来未歇数盆栽★<BR>★天姿仙影日三顾★<BR>★多少次第梦中开★<BR>★梦兰诗觅真抄录★<BR><BR></FONT></SPAN></MARQUEE><SPAN style="BACKGROUND-COLOR: #0000ff"></SPAN>

21 延时向左平跳的文字代码

<marquee scrolldelay=600 scrollamount=120>沧海觅真看你来了</marquee>

22.由中间向左右伸拉字体代码

<CENTER><FONT face=隶书 color=#ff00ff size=7>
<MARQUEE scrollAmount=2 width=180 height=30>---觅真欢迎您---</MARQUEE></FONT></MARQUEE><FONT face=隶书 color=#00ff00 size=6>
<MARQUEE scrollAmount=2 direction=right width=180 height=30>---您迎欢真觅---</MARQUEE></FONT>
<P></P></CENTER>

23 黑底动感闪光彩字代码

<TABLE align=center background=http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0024.gif border=3><TBODY><TR>
<TD style="FILTER: mask(color=#000000)" align=middle><br>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于快乐</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于运动</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于自然</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于求索</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于睿智</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于友爱</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于心灵</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>美于创造</B></FONT></P>
<P><FONT style="FONT-SIZE: 48pt" face=华文行楷 ><B>觅真自勉</B></FONT></P>
</TD></TR></TBODY></TABLE>

24.竖写的文字代码

<CENTER>
<TABLE style="WIDTH: 10px; HEIGHT: 10px" cellSpacing=1 cellPadding=1 border=1>
<TBODY>
<TR>
<TD>
<DIV style="WIDTH: 10px; writing-mode: tb-rl; text-align: center">
<DIV><FONT size=4>美于快乐</FONT></DIV>
<DIV><FONT size=4>美于运动</FONT></DIV>
<DIV><FONT size=4>美于自然</FONT></DIV>
<DIV><FONT size=4>美于求索</FONT></DIV>
<DIV><FONT size=4>美于睿智</FONT></DIV>
<DIV><FONT size=4>美于友爱</FONT></DIV>
<DIV><FONT size=4>美于心灵</FONT></DIV>
<DIV><FONT size=4>美于创造</FONT></DIV>
<DIV><FONT size=4>觅真自勉</FONT></DIV>
</DIV></TD></TR></TBODY></TABLE></CENTER>

 25.竖写文字滚动代码
<DIV align=center>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=slide loop=1 width=480 height=150>
<MARQUEE style="LINE-HEIGHT: 150%; WRITING-MODE: tb-rl" scrollAmount=1 scrollDelay=100     direction=up   width=480 height=150> <P align=left><FONT style="FONT-SIZE: 15pt; FILTER: WIDTH: 100%; COLOR: red; LINE-HEIGHT: 150%;   FONT-FAMILY: 隶书" ><p> 攻关诗</P> <p>攻城不怕坚</P><p>攻书莫畏难</P><p>科学有险阻</P><p>苦战能过关</P></FONT></P></MARQUEE></MARQUEE></DIV>

26 穿插隐显向左平移文字代码

<DIV align=center>
<MARQUEE scrollAmount=2 width=110 height=75 align="center" scrolldely="10"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000><B>觅 觅</B></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=110 height=75 align="center" scrolldely="10"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#66ff00><B>真 真</B></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=110 height=75 align="center" scrolldely="10"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#f709f7><B>欢 欢</B></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=110 height=75 align="center" scrolldely="10"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#0909f7><B>迎 迎</B></FONT></B></MARQUEE>
<MARQUEE scrollAmount=2 width=110 height=75 align="center" scrolldely="10"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 80pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#f9f900><B>您 您</B></FONT></B></MARQUEE></DIV>

27在图片中穿插平移的文字代码

<CENTER>
<MARQUEE scrollAmount=2 width=40 height=70 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=黑体 color=red size=6>沧 沧</FONT></B></MARQUEE><STRONG> <IMG title=沧海觅真欢迎你 style="WIDTH: 120px; HEIGHT: 80px" height=364 src="http://img.bimg.126.net/photo/bz8eTiRuxZ6CbjpAqyrsbw==/1423418957227219115.jpg%20+ZG+JLS+KPB+ZYB+" width=395 border=0>
</STRONG>
<MARQUEE scrollAmount=2 width=30 height=70 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=黑体 color=yellow size=6>海 海</FONT></B></MARQUEE><STRONG><IMG title=沧海觅真欢迎你 style="WIDTH: 120px; HEIGHT: 80px" height=364 src="http://img.bimg.126.net/photo/bz8eTiRuxZ6CbjpAqyrsbw==/1423418957227219115.jpg%20+ZG+JLS+KPB+ZYB+" width=395 border=0>
 </STRONG>
<MARQUEE scrollAmount=2 width=30 height=70 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=黑体 color=#0033cc size=6>觅 觅</FONT></B></MARQUEE><STRONG><IMG title=沧海觅真欢迎你 style="WIDTH: 120px; HEIGHT: 80px" height=364 src="http://img.bimg.126.net/photo/bz8eTiRuxZ6CbjpAqyrsbw==/1423418957227219115.jpg%20+ZG+JLS+KPB+ZYB+" width=395 border=0>
 </STRONG>
<MARQUEE scrollAmount=2 width=25 height=70 scrolldely="10" align="center"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 30pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=黑体 color=#006633 size=6>真 真</FONT></B></MARQUEE></CENTER>

28 图片绑定文字一起左右移动代码

<MARQUEE scrollAmount=3 behavior=alternate width:100%><IMG src="http://img.blog.163.com/photo/QTIh9Mnt09TWkFlFppBeXQ==/599823175370644539.jpg[/img]" border=0> 沧海觅真感谢您的光临、支持与厚爱 <IMG src="http://img.blog.163.com/photo/QTIh9Mnt09TWkFlFppBeXQ==/599823175370644539.jpg[/img]" border=0></MARQUEE>

29 文字与图片上下波浪移动代码

<P align=left>
<TABLE style="BORDER-RIGHT: #00ff00 15px ridge; BORDER-TOP: #00ff00 15px ridge; BORDER-LEFT: #00ff00 15px ridge; BORDER-BOTTOM: #00ff00 15px ridge; BACKGROUND-COLOR: red" cellSpacing=0 align=left>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR></TR></TBODY></TABLE>
<TABLE height=300 width=400>
<TBODY>
<TR>
<TD>
<MARQUEE scrollAmount=1 scrollDelay=100 direction=down behavior=alternate height=300>
<MARQUEE scrollAmount=1 scrollDelay=100 behavior=alternate><IMG src="
http://img.blog.163.com/photo/QTIh9Mnt09TWkFlFppBeXQ==/599823175370644539.jpg[/img]" border=0>觅真欢迎您</MARQUEE></MARQUEE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>


(三)极特殊的旋转文字代码

<html>
<head><body >
<SCRIPT language=javascript>
Phrase="欢迎您光临沧海觅真博客!"
Balises=""
Taille=156;
Midx=345;
Decal=0.5;
Nb=Phrase.length;
y=-100000;
for (x=0;x<Nb;x++){
  Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:9;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:9">' + Phrase.charAt(x) + '</DIV>'
}
document.write (Balises);
Time=window.setInterval("Alors()",40);
Alpha=50;
I_Alpha=0.02;

function Alors(){
 Alpha=Alpha-I_Alpha;
 for (x=0;x<Nb;x++){
  Alpha1=Alpha+Decal*x;
  Cosine=Math.cos(Alpha1);
  Ob=document.all("L"+x);
  Ob.style.posLeft=Midx+321*Math.sin(Alpha1)+23;
  Ob.style.zIndex=11*Cosine;
  Ob.style.fontSize=Taille+3*Cosine;
  Ob.style.color="rgb("+ (22+Cosine*50+35) + ","+ (100+Cosine*60+35) + ",0)";
 }
}

</SCRIPT>
</body ></head></html>

 【特别说明】文中代码源于网络,归功于原创者,本人只是整理变通而已;其中个别代码不能完全显现,请查看博客原文;其效果图,为便于传送防止失真,均已省略;阅者可通过 “精点通--代码在线运行检测” 之。

 

沧海觅真

  评论这张
 
阅读(210)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017