【原】代码入门教程（11）

春天没来 2012-10-29

展开全文

第二章标签应用

第七节 移动文字（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、左右摇摆文字代码：

<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">

<font color="#0000ff">
<div>
<a href="http://www.360doc.com/userhome/4127803"

target="_blank"><img alt="春天没来欢迎您"

src=http://image26.360doc.com/DownloadImg/2011/04/0600/10671896_1.jpg __1302018949640__="ev_7555285507">

</a>
<a href="http://image26.360doc.com/DownloadImg/2011/

04/0600/10671896_1.jpg" target="_blank">
<img alt="春天没来欢迎您"

src="http://image26.360doc.com/DownloadImg/

2011/04/0600/10671896_1.jpg" __1302018949640__=

"ev_7555285507"></a>

<a href="http://image26.360doc.com/DownloadImg/2011/

04/0600/10671896_1.jpg"

target="_blank">
<img alt="春天没来欢迎您"

src="http://image26.360doc.com/DownloadImg/

2011/04/0600/10671896_1.jpg" __1302018949640__=

"ev_7555285507"></a>

<a href="http://image26.360doc.com/DownloadImg/

2011/04/0600/10671896_1.jpg" target="_blank">
<img alt="春天没来欢迎您"

src="http://image26.360doc.com/DownloadImg/

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">

<a href="http://www.360doc.com/content/12/0129/14/4127803_

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;">

<a href="http://www.360doc.com/showWeb/0/0/183379540.aspx"

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;">

<a href="http://www.360doc.com/showWeb/0/0/183225358.aspx"

target="_blank"><font color="#2763ad">个人图书馆中的几个操作技巧

</font></a></div>
<p style="font-size: 18pt;" align="right">

<a href="http://image26.360doc.com/DownloadImg/2011/04/0600/

10671896_123.jpg" target="_blank"><img alt="2010年6月22日

- 玫瑰夫人"src="http://image26.360doc.com/DownloadImg/

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">

２０１１年９月７日</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">

</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、应用上面讲解的七种代码，各制作一篇文字。

“春天没来”欢迎您

您迎欢“来没天春”

２０１２年１０月 3 0 日于北京

第二章 标签应用

第八节 移动文字（7）

本节讲解几种可以成为模块的移动文字代码。

代码1：

<table style='border-style: solid; border-color: rgb(108, 204, 0);

width: 100%; height: 60px; text-align: left; border-collapse: collapse;

background-image: url("http://image16.360doc.com/DownloadImg/

2010/10/2915/6379737_75.gif");' border="3" cellSpacing="0"

cellPadding="3" width="500">
<tbody>
<tr style="text-align: left;">
<td>
<marquee><font style="line-height: normal; font-size: 30pt; font-style:

normal; font-variant: normal;" color="#0000ff">“春天没来”欢迎您

</font></marquee></td>
<td style="text-align: left;">
<marquee direction="right">

<font style="line-height: normal; font-size: 30pt; font-style: normal;

font-variant: normal;" color="#0000ff">您迎欢“来没天春”

</font></marquee></td></tr></tbody></table>

解析：

1、设置一个一行二列的表格，表格标签中放入一个闪光的背景图片，两个单元格中各放入一行移动的文字，第一个移动标签的移动方向“向左”，第二个移动标签的移动方向“向右”。

2、修改这个小模块中的文字内容，变为你自己的模块，可以添加到图书馆首页，作为自定义模块使用；也可以放入你撰写的文章的末尾或者段落之间，作为分割线或者插图使用。

3、上面的表格标签：

<table style='border-style: solid; border-color: rgb(108, 204, 0);

width: 100%; height: 60px; text-align: left; border-collapse: collapse;

background-image: url("http://image16.360doc.com/DownloadImg/

2010/10/2915/6379737_75.gif");' border="3" cellSpacing="0"

cellPadding="3" width="500">

解析：

<表格标签 css样式＝'边框线样式：实心线；边框线颜色：十进制颜色（红色值108，绿色值204，蓝色值0）；宽度：100％；高度：60px；对齐方式：居左；边框是否合并：合并；背景图片：路径（图片地址）；’边框线粗度＝“3” 边距＝“0”

间距＝“3” 宽度＝“500”px>

代码2：

<center>
<table style='border-style: double; width: 500px; height: 27px;

text-align: center; border-collapse: collapse; background-image:

url("http://image37.360doc.com/DownloadImg/2011/09/1515/

17656971_57.jpg");' border="5" cellSpacing="10" cellPadding="3"

width="500">
<tbody>
<tr style="text-align: center;">
<td style="text-align: center;">
<center>
<marquee direction="down" height="50" scrollAmount="2">
<div style="margin: 0px; padding: 0px; width: 520px; text-align: left;

filter: shadow(color=#00ff00, strength=10);">

<font style="line-height: normal; font-size: 50pt; font-style: normal;

font-variant: normal; font-weight: normal;" color="#ff0000" face="宋体">

<b>春天没来欢迎您</b></font></div></marquee>
<marquee direction="up" height="50" scrollAmount="2">
<div style="margin: 0px; padding: 0px; width: 520px; text-align: left;

filter: shadow(color=#ff33ff, strength=10);"><font style="line-height:

normal; font-size: 50pt; font-style: normal; font-variant: normal;

font-weight: normal;" color="#ffff00" face="华文行楷"><b>

春天没来欢迎您</b></font></div></marquee></center></td>

</tr></tbody></table></center>

解析：

1、设置了一个表格，表格标签中放入一个背景图片，表格的单元格中分为两个块区。第一块区，移动方向“向下”的移动标签控制、指挥着“春天没来欢迎您”的文字；第二块区，移动方向“向上”的移动标签控制、指挥着“春天没来欢迎您”的文字。

2、上面代码中的块区标签：

<div style="margin: 0px; padding: 0px; width: 520px;

text-align: left; filter: shadow(color=#00ff00, strength=10);">

块区标签解析： <块区标签 css样式＝“外边距：0px；内边距：0px；宽度：520px；对齐方式：居左；滤镜：投影（颜色＝绿色，宽度＝10）；”>

3、修改这个小模块中的文字内容，变为你自己的模块，可以添加到图书馆首页，作为自定义模块使用；也可以放入你撰写的文章的末尾或者段落之间，作为分割线或者插图使用。

代码3：

<table style="border: 5px ridge rgb(127, 255, 212); left: 0px; top: 0px;

width: 512px; height: 512px; position: relative;" border="0"

cellSpacing="0" cellPadding="0" background=

"http://image23.360doc.com/DownloadImg/2011/02/1217/9110177_1"

align="center">
<tbody>
<tr>
<td>
<table style="left: 0px; top: 0px; width: 120px; height: 380px;

border-right-color: rgb(127, 255, 212); border-right-width: 3px;

border-right-style: ridge; position: absolute;" border="0"

cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td>
<div align="center">
<marquee style="width: 60px; color: rgb(255, 255, 0);

line-height: 150%; font-family: 华文彩云; font-size: 40pt;

filter: shadow(color=black);" direction="up" height="380"

width="60" scrollAmount="3"><br>步<br>步<br>登<br>

上<br>代<br>码<br>山<br><br><br><br><br><br>

</marquee></div></td></tr></tbody></table>
<table style="left: 120px; top: 0px; width: 380px; height: 120px;

border-bottom-color: rgb(127, 255, 212); border-bottom-width: 3px;

border-bottom-style: ridge; position: absolute;" border="0"

cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td>
<div align="center">
<marquee style="width: 380px; color: rgb(255, 255, 0);

line-height: 150%; font-family: 华文彩云; font-size: 40pt;

filter: shadow(color=black);" direction="right" height="80"

width="380" scrollAmount="3"><wbr><wbr><wbr><wbr>

愚 <wbr>然 <wbr>既 <wbr><wbr><wbr><wbr><wbr><wbr>

</marquee></div></td></tr></tbody></table>
<table style="border-width: 0px; border-style: ridge; border-color:

rgb(155, 0, 0) rgb(155, 0, 0) rgb(127, 255, 212); left: 120px;

top: 120px; width: 262px; height: 262px; position: absolute;"

border="0" cellSpacing="0" cellPadding="0" background="">
<tbody>
<tr>
<td></td></tr></tbody></table>
<table style="left: 0px; width: 380px; height: 120px; bottom: 0px;

border-top-color: rgb(127, 255, 212); border-top-width: 3px;

border-top-style: ridge; position: absolute;" border="0"

cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td>
<div align="center">
<marquee style="width: 380px; color: rgb(255, 255, 0);

line-height: 150%; font-family: 华文彩云; font-size: 40pt;

filter: shadow(color=black);" height="80" width="380"

scrollAmount="3"><wbr><wbr><wbr><wbr><wbr><wbr>

立 <wbr>下 <wbr>愚 <wbr>公 <wbr>移 <wbr>山 <wbr>

志 <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>

</marquee></div></td></tr></tbody></table>
<table style="left: 380px; width: 120px; height: 380px; bottom: 0px;

border-left-color: rgb(127, 255, 212); border-left-width: 3px;

border-left-style: ridge; position: absolute;" border="0"

cellSpacing="0" cellPadding="0">
<tbody>
<tr>
<td>
<div align="center">
<marquee style="width: 60px; color: rgb(255, 255, 0); line-height:

150%; font-family: 华文彩云; font-size: 40pt; filter: shadow

(color=black);" direction="down" height="380" width="60"

scrollAmount="3"><br><br><br><br><br><br>难<br>习<br>

学<br>码<br>代<br>愁<br>何<br></marquee></div></td></tr>

</tbody></table></td></tr></tbody></table>
解析：

1、这是一个分别向上、下、左、右移动的文字代码。

此代码先设置了一个总表格，在总表格内放入了5个表格。放入的第一个表格，用移动方向“向上”的移动标签控制着文字：“步步登上代码山”；放入的第二个表格，用移动方向“向右”的移动标签控制着文字：“既然愚公能移山”；放入的第三个表格，位于页面正中央，是个空表格，可放入一个小图片。放入的第四个表格，用移动方向“向左”的移动标签控制着文字：“立下愚公移山志”；放入的第五个表格，用移动方向“向下”的移动标签控制着文字：“何愁代码学习难”。

代码4：

<div style="left: 0px; top: 24px; position: absolute;"

class="divBorderStyle">
<marquee style="left: 0px; width: 1340px;" height="270"

behavior="alternate" scrollAmount="3">
<font size="6">

★<font style="font-size: 32px;"><strong>“春天没来”欢迎您★

</strong>★<font style="font-size: 32px;">

<strong>“春天没来”欢迎您★ </strong>★

<font style="font-size: 32px;"><strong>“春天没来”欢迎您★

</strong>★<font style="font-size: 32px;">

</font></font></font></font></font></marquee></div>

代码解析：

1、这是一个文字顶图代码。

第一个标签是块区标签。块区标签解析：

<块区标签 css样式＝“居左：0px；居上：24px定位类型：绝对定位；” 选择器＝“块区边框样式”>

第二个标签是移动标签。

移动标签解析：<移动标签 css样式＝“居左：0px；宽度：1340px；” 高度＝270px；移动方式＝“来回走” 移动速度＝“3”>

2、把文字内容替换一下，就可成为你的文字顶图。

3、这个文字顶图可以和图片顶图一起添加到你的图书馆首页顶栏中去，让文字顶图和图片顶图同时显示，以增强你的图书馆顶图魅力。添加顺序必须是：先添加图片顶图，再添加文字顶图。（添加顺序很重要欧，别弄错了！）

代码入门教程(1)	代码入门教程(2)	代码入门教程(3)
代码入门教程(4)	代码入门教程(5)	代码入门教程(6)
代码入门教程(7)	代码入门教程(8)	代码入门教程(9)