（教学思路 HTML之三）滚动字幕和建立使用列表-阿里云开发者社区

这节课我们来学习制作网页上的滚动字幕及如word中的列表的建立和使用，由于在实际动态网站制作中滚动的字幕效果是最简单的多媒体效果，可以增加文章的动态效果，吸引浏览者的眼球，加强了网页的互动性，所以建议同学们要学会熟练的运用它的几种重要的属性。

首先我们来看一下 滚动文字的基本语法<marquee>滚动文字</marquee>，当我们要设置文字的字体、大小和颜色时，可以在这对标记中嵌套上节课学习过的标记，比如<marquee>这里的文字的字体为隶书，字号为5像素，同时滚动的方向为默认的从浏览器的从右向左的滚动效果</marquee>。这个例子先不给大家演示了，我将会和滚动标记的其他属性结合起来，展示它的效果。

接下来我们主要来看一下<marquee>标记都有哪些属性，下面的属性我会先逐个讲解用法，然后演示例子效果：
align：是设定活动字幕的位置，不过除了居左、居中、居右三种位置外，又增加靠上（align=top）和靠下（align=bottom）两种位置。这个属性比较好理解，在这里就不做过多的讲解了。

Bgcolor：为了能够突出显示滚动的文字内容，我们可以通过bgcolor属性为滚动文字添加背景颜色，这样在网页中就会更加明显。设定活动字幕的背景颜色，一般是十六进制数也可以用英文单词。比如：<marquee bgcolor="red">滚动文字的背景颜色设置为红色</marquee>,其中背景颜色要覆盖整个滚动文字会滚动过的区域，所以宽度是和文字相等宽度的颜色带。

Direction：在没有给滚动文字设置方向时，文字总是按从右向左的顺序滚动，direction属性是设定字幕的滚动方向，它一共有四中方向，分别是向左、向右、向上up、向下down。比如<marquee direction=right>这里的滚动文字会从左向右走</marquee>

Behavior：用于设定滚动的方式，这个属性可以设置滚动文字是一直滚动下去，还是交替滚动，或是只滚动一次，它的属性值一共有三种方式：behavior=“scroll”表示由一端滚动到另一端；behavior=“slide”:表示由一端快速滑动到另一端，且不再重复； behavior=“alternate”表示在两端之间来回滚动。我下面的例子就分别列列举出三个例子，让同学们直观的体会到他们的不同。

Height：用于设定滚动字幕的高度。 Width：则设定滚动字幕的宽度。这两个属性的赋值方式也是有两种，如上节课所说的相对值和绝对值，这两个属性主要是设置滚动范围也就是设置滚动的背景面积范围，比如： <marquee width="50%">这里的滚动范围是从屏幕的一半开始向左滚动的 </marquee>

Hspace和vspace：默认情况下，滚动文字和周围文字及图片是紧贴显示的，使用这两个属性就可以自由设置滚动文字背景的水平和垂直空白空间了，也就是指滚动文字背景和它周围文字及图片之间的空白空间范围。用于Hspace设定滚动字幕的左右边框，vspace设置上下边框的宽度。

比如：

<hr>

<marquee bgcolor="#00ff00" hspace=20 vspace=10>这里的文字距离这两条水平线的空白空间为20像素，垂直为10像素</marquee>

<hr>
Scrollamount：用于设定活动字幕的滚动速度，也就是滚动文字每次移动的长度，单位是像素。

scrolldelay：用于设定滚动两次之间的延迟时间。延迟时间是以毫米为单位，毫米是千分之一秒，这个延迟时间设置得越小，滚动得越快，延迟时间设置得如果过大，还会出现走走歇歇的效果。在实际应用过程中，延迟时间和滚动速度是要一起设置，这样效果会更加明显。

Loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新，并且当滚动方式不是交替滚动时，设置了loop属性后，文字将不会出现在浏览器内。

下面我们来看看这个例子代码：

1 < html >
2 < head >
3 < title >（教学思路 HTML之三）滚动字幕和建立使用列表 </title>
4 </head>
5 < body >
6 < marquee > 这里的文字的字体为隶书，字号为5像素，同时滚动的方向为默认的从浏览器的从右向左的滚动效果 </marquee> 
7 < marquee behavior ="scroll" scrollamount ="20" >表示由一端滚动到另一端,我走的快吧！ </marquee> 
8 < marquee behavior ="slide" width ="50%" >由一端快速滑动到另一端，且不再重复，我从屏幕的一半开始走，碰到壁了，我不走了！ </marquee> 
9 < marquee loop ="2" behavior ="alternate" >表示在两端之间来回滚动。我只走2次 </marquee> 
10 < marquee direction ="up" bgcolor ="red" height ="10%" >我会从页面的10%的高度往上走 </marquee> 
11 </body>
12 </html>

这个例子中我一共演示了五中滚动字幕，其中每个滚动文字都说明了滚动的效果说明，

这是页面刚刚刷新时的效果，可以看出第3条字幕是从屏幕的一般开始走的，这是有width=50%控制的，第五个字幕红色背景的高度也是由height=10%控制的。下面这幅截图是第三条和第四条字幕结束滚动时的效果，可以发现，第三条只走了一次，loop=1，碰到左边浏览器的边框，它就不走了，第四条字幕，因为是左右交替走 behavior="alternate"，而且只走两次loop=2，所以最后停在了浏览器的右边框处。

滚动文字效果我们就学习到这里，接下来我们来学习一下列表，HTML中提供了列表目的是可以对网页文字进行更好的布局，所谓列表：就是在网页中将项目有序和无序罗列显示，列表一共分为五种：定义列表<dl> 无序列表<ul> 目录列表<dir> 菜单列表<menu> 有序列表<ol>,我们常用的就是无序列表、有序列表和定义列表，下面我们来分别看一下这三种列表

无序清单

无序清单用<ul>开始，每一个清单条目用<li>引导，最后是</ul> 结束，输出时每一清单条目自动缩进，并且以黑点标示。如下
<ul>
<li>我是无序列表</li>
<li>我用黑点开头</li>
</ul>

页面效果如下：

· 我是无序列表
·我用黑点开头

有序清单

有序清单与无序清单相比，只是在输出时清单条目默认用数字标示，以<ol>开始</ol>结束，如：
<ol>
<li>我是有序列表：默认序号用1开始
<li>现在序号应该是2了
</ol>

页面效果如下：

我是有序列表：默认序号用1开始
现在序号应该是2了

有序清单条目标记的缺省值是阿拉伯数字，当然我们还可以用type属性修改序号的显示方式。方法为：

<Li type=#>
“#”的取值有如下几种类型：
“#”取值为“A”，显示大写字母。
“#”取值为“a”，显示小写字母。
“#”取值为“I ”，显示大写罗马数字。
“#”取值为“i”，显示小写罗马数字。
“#”取值为“l ”，缺省值，显示阿拉伯数字。

如：
<ol type=“#a”>
<li >我是有序列表：序号用a开始
<li >现在序号应该是b
<li type=“#A”>现在我又规定了type=A，应该序号是A了
</ol>
页面效果如下：

a. 我是有序列表：序号用a开始

b. 现在序号应该是b

A. 现在我又规定了type=A，应该序号是A了

定义清单

定义清单用于对清单条目进行简短说明。用<dl>开始，清单条目用<dt>引导，它的说明用<dd>引导，比如：
<Body>
<dl>
<dt>第一条：
<dd>定义清单
<dt>第二条：
<dd>我是第二条的说明
</dl>
</Body>

页面效果如下：

第一条：

定义清单

第二条：

我是第二条的说明

其他两种清单中的条目都是用<li>用法也大致相同，这里就不细讲了，大家要熟练掌握，在日后的实际开发中一般都会根据条目的数量动态的加载到你所也的页面中，比如：

<ul class="categorylisting">
<% foreach(var category in viewdata){%>
<li>
<%= Html.ActionLink(category.categoryname,new{action="list",category=category.categoryname})%>
<%}%>
</li>
</ul>
当然这里有很多代码你们暂时还看不懂，但是没关系，日后的学习到开发语言时就会弄清楚它的具体用法了，提出来就是想让你们知道他的重要。今天这节课，我们就先学习到这里，下一节课我们将来学习HTML中的重点表格的制作及使用。

本文转自叶子文文博客51CTO博客，原文链接http://blog.51cto.com/leafwf/185764如需转载请自行联系原作者

叶子文文

（教学思路 HTML之三）滚动字幕和建立使用列表

热门文章

最新文章

相关课程

相关电子书

相关实验场景