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

春天没来 2012-10-27

展开全文

图中的金鱼会动哦！用鼠标指向它试试看！

第二章标签应用

第五节移动文字（4）

本节学习六种移动文字代码：并排移动的文字代码、相背而行的文字代码、相对而行的文字代码、中间向两边移动的文字代码、左右移动的文字代码、上下合并的文字代码。其中“并排移动的文字代码（四种形式）”，实际上是对已学知识的复习巩固。比较一下，“并排移动的文字代码（四种形式）”与“移动方向”一节的代码有什么不同。

一、并排移动的文字代码（四种）：

（1）并排向左移动代码：

<marquee direction="left">我们并排向左行 我们并排向左行 我们并排向左行</marquee>

（2）并排向右移动代码：
<marquee direction="right">我们并排向右行 我们并排向右行 我们并排向右行</marquee>

（3）并排向上移动代码：

<marquee direction="up">我们并排向上行 我们并排向上行 我们并排向上行</marquee>

（4）并排向下移动代码：

<marquee direction="down">我们并排向下行 我们并排向下行 我们并排向下行</marquee>

二、相背而行的文字代码：

<marquee direction="up">我在向上行</marquee> 
<marquee direction="down">我在向下行</marquee>

代码解析：

“相背而行的文字代码”由两个移动标签组成。第一个移动标签的移动方向“向上”，第二个移动标签的移动方向“向下”。第一个移动标签的尾标签后面设置了一个换行标签 ，使文字成为两行排列，上面的一行向上移动，下面的一行向下移动，呈相背而行的形式显示。

三、相对而行的文字代码：

<MARQUEE direction=down>我在向下行</MARQUEE>
<MARQUEE direction=up>我在向上行</MARQUEE>

代码解析：

“相对而行的文字代码”由两个移动标签组成。第一个移动标签的移动方向“向下”，第二个移动标签的移动方向：“向上”。

四、中间向两边移动的文字代码：

<MARQUEE width=300 height=270>
中间向两边移动

</MARQUEE>
<MARQUEE direction=right width=300 height=270>
动移边两向间中
</MARQUEE>

代码解析：

“中间向两边移动的文字代码”由两个移动标签组成。第一个移动标签的移动方向“向左”，标签中没有设置移动方向的属性，是采用系统默认的移动方向：向左；第二个移动标签的移动方向是“向右”。两个移动标签中的“移动屏幕宽度”都设置为300px，使这些文字能够在同一行显示。如果把“移动屏幕宽度”都设置为超过350px，些文字就不能在同一行显示了。

五、左右移动的文字代码：

<marquee direction="right" height="80" width="350">

我向右行

</marquee> 

<marquee height="80" width="350">

我向左行

</marquee>

代码解析：

“左右移动的文字代码”由两个移动标签组成。第一个移动标签的移动方向“向右”，第二个移动标签的移动方向“向左”。这两个移动标签，可以交换位置。

六、上下合并的文字代码：

<marquee direction="down" height="60" scrollAmount="2">
<center>春天没来欢迎您的光临</center></marquee>

<marquee direction="up" height="60" scrollAmount="2">
<center>春天没来欢迎您的光临</center></marquee>

代码解析：

1、“上下合并的文字代码”由两个移动标签组成。第一个移动标签的移动方向“向下”，第二个移动标签的移动方向“向上”。可不能颠倒欧！颠倒以后就变成“相背而行”了。

2、和上面的“相对而行的文字代码”比较一下，看看有什么区别。欧！少了几个换行标签 。

作业：

1、认真阅读“代码解析”，掌握以上各种移动文字代码的设置要点。

2、用“并排移动的四种文字代码”各发表一篇文章。代码中的文字内容，字体、字号、文字颜色、移动速度等内容，都可以进行修改，还可以在移动标签中添加“移动速度”、“移动间隔时间”的属性。会不会修改或者添加，就要看你以前学过的知识会不会应用了。

3、用其余的五种代码各制作一篇文章。

4、思考题：“并排移动的四种文字代码”在文字之间为什么要用 标签？

２０１２年１０月 2 7 日于北京

第二章标签应用

第六节移动文字（5）

本节继续学习移动文字。下面讲解五种移动文字代码。“走走停停的文字代码”，给你提供了三种形式。这些代码中的文字，都是由两个移动标签包围的（也可以说是控制的、指挥的、装饰的。）认真观察它们的效果，学会应用这些代码。

1、向右上移动的文字代码：

代码解析：

1、三行“春天没来欢迎您”的文字被两个移动标签包围着，第一个移动标签的移动方向“向上”，第二个移动标签的移动方向“向右”，综合效果是向“右上”。这两个移动标签可以互换位置。

2、文字标签解析：

<文字标签 css样式＝“行高：默认；文字字号：30pt；字体风格：默认；小型大写字母的字体显示文本：默认；文本的粗细：默认；”颜色＝红色>

2、向左上移动的文字代码：

代码解析：

1、三行“春天没来欢迎您”的文字被两个移动标签包围着，第一个移动标签的移动方向“向上”，第二个移动标签的移动方向“向左”，综合效果是向“左上”。这两个移动标签可以互换位置。

2、文字标签解析：

<文字标签 css样式＝“行高：默认；文字字号：30pt；字体风格：默认；小型大写字母的字体显示文本：默认；文本的粗细：默认；”颜色＝红色>

3、向右下移动的文字代码：

代码解析：

1、三行“春天没来欢迎您”的文字被两个移动标签包围着，第一个移动标签的移动方向“向下”，第二个移动标签的移动方向“向右”，综合效果是向“右下”。这两个移动标签可以互换位置。

2、文字标签解析：

<文字标签 css样式＝“行高：默认；文字字号：30pt；字体风格：默认；小型大写字母的字体显示文本：默认；文本的粗细：默认；”颜色＝红色>

4、向左下移动的文字代码：

代码解析：

1、三行“春天没来欢迎您”的文字被两个移动标签包围着，第一个移动标签的移动方向“向下”，第二个移动标签的移动方向“向左”，综合效果是向“左下”。这两个移动标签可以互换位置。

2、文字标签解析：

<文字标签 css样式＝“行高：默认；文字字号：30pt；字体风格：默认；小型大写字母的字体显示文本：默认；文本的粗细：默认；”颜色＝红色>

5、走走停停的文字代码
 代码（1）：
<marquee behavior="alternate" width="100%">
<marquee behavior="alternate" width="90%">“春天没来”欢迎您</marquee></marquee>
 代码（2）：
<marquee behavior="alternate" width="100%">
<marquee width="96%">“春天没来”欢迎您</marquee></marquee>

代码（3）：
<marquee behavior="alternate" width="100%" scrollAmount="20">
<marquee width="96%">“春天没来”欢迎您</marquee></marquee>
代码解析：

1、“走走停停的文字”要用两个移动标签控制。两个移动标签内可以都设置“来回走”的移动方式，也可以只在一个移动标签中设置；两个移动标签内的移动屏幕宽度，一个设置得要宽一点，另一个设置得要窄一点；移动速度，可以设置也可以不设置。

2、仔细观察一下，上面的三种“走走停停的文字”，效果是有区别的。

作业：

1、认真阅读“代码解析”，深刻领会上面各种代码设置的道理，学会应用这些代码。

2、用上面讲解的7种代码，各发表一篇文章。代码中的属性与属值可以修改。要认真观察发表以后的显示效果，把你修改成功的代码保存下来。

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