第 二 章 标 签 应 用
第七节 移动文字(6)
本节讲解七种移动文字代码。对全篇文章横排版与竖排版的代码要重点学习,熟练掌握,学会应用。
1、跳着走的文字代码:
<marquee scrollAmount="100" scrollDelay="300">
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff0000"><b>
“春天没来”欢迎您</b></font></marquee>
代码解析:
“跳着走的文字代码”设置要点为:移动标签中移动速度和移动间隔时间的值都要设置得大一点。
2、曲线移动文字代码:
<center>
<marquee style="width: 400px; height: 270px; color: rgb(255, 255, 0);
font-size: 11pt; filter: Wave(freq=8, light=50, phase=20, strength=6);"
direction="up" scrollAmount="1" scrollDelay="100">
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff0000">喜欢静静地想你,<br>放上一段优雅的音乐,<br>沏上一杯淡淡的花茶,<br>捧着一本厚厚的小说,<br>在字行之间寻找你的影子。<br> 你的身影很模糊,<br>你的脸庞很朦胧,<br>但这并不影响我想你的情绪。<br> 我没有很想你,<br>只是在高兴的时候会想起你,<br>你是我第一个想要分享的人;<br><br> 我没有很想你,<br>只是在不高兴的时候会想起你,<br>你是我第一个想要倾诉的人。<br>我想你,<br>但只是想你而不打扰你。 !</font></marquee></center>
代码解析:
“曲线移动文字代码”的设置要点为移动标签中使用了css滤镜的Wave属性。
“曲线移动文字代码”中的“移动标签”解析:
<移动标签 css样式=“移动屏幕宽度:400px;移动屏幕高度:270px;文字颜色:十进制颜色(255,255,0);文字字号:11pt;滤镜:波纹样式扭曲(频率=8,使波纹增强光效=50,偏移量=20,波形的振幅大小,即扭曲的程度=6);”移动方向=“向上”;移动速度=“1”;移动间隔时间=“100”>
3、左右摇摆文字代码:
<marquee behavior="alternate" width="10%">
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff0000">春</font >
</marquee>
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#00ff00">天</font >
<marquee behavior="alternate" width="10%">
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff0000">没</font >
</marquee>
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#00ff00">来</font >
<marquee behavior="alternate" width="10%">
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff0000">欢</font >
</marquee>
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#00ff00">迎</font >
<marquee behavior="alternate" width="10%">
<font style="line-height: normal; font-size: 30pt; font-style: normal;
font-variant: normal; font-weight: normal;" color="#ff0000">您</font >
</marquee>
代码解析:
“左右摇摆文字代码”中,相邻的两个文字,一个设置移动标签,另一个不设置移动标签。移动标签中,要设置“来回走”的移动方式,移动屏幕的宽度不宜太大,移动方向可以设置“向左”或者“向右”的移动方向,也可以不设置移动方向,采用系统默认的“向左”的移动方向。
4、波浪式移动文字代码:
<marquee direction="up" height="200" behavior="alternate"
scrollAmount="5">
<marquee behavior="altrnate" width="650" scrollAmount="5">
<font color="red" size="7" face="隶书">波浪式移动文字
</font></marquee></marquee>
代码解析:
“波浪式移动文字”由两个移动标签控制文字内容。移动标签中既要设置移动速度,也要设置移动方向,还要设置“来回走”的移动方式。移动方向可以设置为:“向左”和“向上”或者“向右”和“向上”。两个移动标签中移动屏幕的宽度,一个要设置得宽一点,另一个要设置得窄一点。
5、全篇文章横排向上移动的代码:
<marquee style="width: 100%; height: 200px;" direction="up"
scrollAmount="2">
<div style="font-size: 24pt;" align="center">
<font color="#0000ff"><strong>献 给 您 的 礼 物</strong>
</font></div><div style="font-size: 24pt;" align="center">
<strong><font color="#0000ff"></font></strong> </div>
<div style="font-size: 24pt;" align="center"><strong>
target="_blank"><img alt="春天没来欢迎您"
04/0600/10671896_1.jpg" target="_blank">
<img alt="春天没来欢迎您"
2011/04/0600/10671896_1.jpg" __1302018949640__=
"ev_7555285507"></a>
04/0600/10671896_1.jpg"
target="_blank">
<img alt="春天没来欢迎您"
2011/04/0600/10671896_1.jpg" __1302018949640__=
"ev_7555285507"></a>
2011/04/0600/10671896_1.jpg" target="_blank">
<img alt="春天没来欢迎您"
2011/04/0600/10671896_1.jpg" __1302018949640__=
"ev_7555285507"></a>
</div></font></strong></div><a style="font-size: 18pt;"
href="/content/11/0828/20/4127803_144075423.shtml"
target="_blank">
<div style="font-size: 18pt;" align="left">
<br></div></a><div style="font-size: 18pt;" align="left">
182505971.shtml" target="_blank"><font color="#2763ad">
“ 网文摘手”的安装与使用方法</font></a></div>
<div style="font-size: 18pt;" align="left">
<a style="font-size: 18pt;" href="/content/11/0828/20/4127803_
144075423.shtml" target="_blank"><br>“个人图书馆”操作方法介绍
</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a class="nav12" href="/content/11/0919/09/4127803_
149402900.shtml"target="_blank"><font color="#2763ad">
新版阅览室简介(二次修改版)</font></a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0821/17/4127803_142204458.shtml"
target="_blank">如何上传图片</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0903/06/4127803_145390586.shtml"
target="_blank">怎样“添加模块”</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;"><a href="/content/11/0823/08/4127803
_142573526.shtml" target="_blank">个人图书馆首页导航</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;"><a href="/content/11/0829/06/4127803_
144143170.shtml" target="_blank">别人眼中我的图书馆(修改)
</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;"><a href="/content/11/0829/06/4127803
_144143579.shtml" target="_blank">首页换肤</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
target="_blank"><font color="#2763ad">
如何把个人图书馆的快捷方式放到桌面上</font></a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144142930.shtml"
target="_blank">我的馆友</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144142190.shtml" target=
"_blank">给文章作“标记和批注”的方法</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144142121.shtml" target=
"_blank">移动文章的方法</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144142053.shtml" target=
"_blank">认识“目录树”</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144141918.shtml" target=
"_blank">撰写文章的方法</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144141830.shtml" target=
"_blank">编辑文章的方法</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144141771.shtml" target=
"_blank">修改个人资料的方法</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0829/06/4127803_144141733.shtml" target=
"_blank">搜索框使用方法</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0824/20/4127803_143025181.shtml" target=
"_blank">电脑学习--图书馆知识</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0816/09/4127803_140705049.shtml" target=
"_blank">如何进行“个人设置”</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0616/21/4127803_127449653.shtml" target=
"_blank">有关360图书馆的知识(1)</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0628/05/4127803_130023516.shtml" target=
"_blank">有关360图书馆的知识(2)</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0718/09/4127803_134215100.shtml" target=
"_blank">有关360图书馆的知识(3)</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<div style="font-size: 18pt;">
<a href="/content/11/0823/09/4127803_142586894.shtml" target=
"_blank">有关360图书馆的知识(4)</a></div></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
<a href="/content/11/0815/20/4127803_140617094.shtml" target=
"_blank">新版360图书馆知识(1)</a></div>
<div style="font-size: 18pt;"> </div>
<div style="font-size: 18pt;">
target="_blank"><font color="#2763ad">个人图书馆中的几个操作技巧
</font></a></div>
<p style="font-size: 18pt;" align="right">
10671896_123.jpg" target="_blank"><img alt="2010年6月22日
2011/04/0600/10671896_123.jpg" __1302018949640__=
"ev_2321050810"></a></p>
<div style="color: rgb(0, 0, 255); font-size: 18pt;" align="right">
春天没来编撰</div>
<div style="color: rgb(0, 0, 255); font-size: 18pt;" align="right">
2011年9月7日</div>
</marquee>
代码解析:
全篇文章全屏向上移动的代码比较简单。只要在你选择的文章代码的前面,设置一个移动方向“向上”的移动标签,在你选择的文章代码的后面添加一个移动尾标签即可。当然了,为了使读者方便阅读,移动标签中的移动速度,还是选择得小一点为宜,一般选择为1—3即可。
二、全篇文章竖排向右移动的代码:
代码1:
<p align="left">
<marquee style="writing-mode: tb-rl;" direction="up" height="320"
width="600" scrollAmount="2" scrollDelay="100">
<p><font style="color: rgb(234, 0, 0); font-family: 方正姚体;
font-size: 29px;" color="#ff0000"><strong>攻 城 不 怕 坚,
</strong></font></p>
<p><font style="font-size: 29px;" color="#ff0000" size="5">
<strong>攻 书 莫 畏 难;</strong></font></p>
<p><font style="font-size: 29px;" color="#ff0000" size="5">
<strong>代 码 虽 难 学,</strong></font></p>
<p><font style="font-size: 29px;" color="#ff0000" size="5">
<strong>巧 学 能 过 关。</strong></font></p>
<p><font style="font-size: 29px;" color="#ff0000" size="5">
<strong> —“春天没来”自勉</strong>
</font></p></marquee><font style="font-size: 32px;"></font></p>
代码2:(先向左然后向右)
<div align="center">
<marquee height="293" behavior="slide" width="550"
scrollAmount="1" scrollDelay="100">
<marquee style="writing-mode: tb-rl;" direction="up" height="290"
width="550" scrollAmount="1" scrollDelay="100">
<p align="left"><font style="color: rgb(234, 0, 0); font-family:
方正姚体; font-size: 18pt;" 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>让--愉悦洒满诗行
</font></p></marquee></marquee></div>
代码解析:
1、“全篇文章竖排向右移动的代码”中,代码
style="writing-mode: tb-rl;" 就是竖排版的代码。竖排版中的向上移动direction="up"实际效果就是向右移动。
2、“全篇文章竖排向右移动的代码”中,代码1的效果是直接向右移动;代码2的效果是文字先向左渐出,然后向右移动。
3、“全篇文章竖排向右移动的代码”适宜于篇幅较短的文章。
作业:
1、学会应用全篇文章的横排版与竖排版的移动代码。重点认识竖排版代码。
2、应用上面讲解的七种代码,各制作一篇文字。