主题：脑动力：HTML+CSS标签速查效率手册 书连载
lili456 [专家分：0] 发布于 2012-06-07 10:39:00
内容提要
HTML是所有网页制作技术的核心和基础，是每个网页制作者必须掌握的基本知识。CSS是用于控制网页内容显示效果的一种标记语言，用它可以制作更美观的页面。两者在网页设计中不可或缺。
本书共分为18章，前10章主要介绍了HTML标签和相关属性、包括文字、排版、列表、超链接、多媒体、表格、表单、框架等知识点。后8章介绍了CSS属性的详细用法和示例代码，包括文本显示、列表显示、链接显示、文字背景、元素定位滤镜等知识点。
本书语言简洁，内容丰富，适合网页设计与制作人员、网站建设开发人员、大中专院校相关专业学生、个人网站爱好者阅读。
当当地址：http://product.dangdang.com/product.aspx?product_id=22766678
回复列表 （共35个回复）
11 楼
lili456 [专家分：0] 发布于 2012-06-07 10:55:00
7.2 动态文字
网页的多媒体元素除了动态图像、声音以及动画等，最简单的就是添加一些动态文字，动态文字可以实现在文字网页中运动，既可以横向滚动，也可以纵向滚动，还可以通过设置相关属性改变滚动的其他状态。
7.2.1 滚动文字标签——marquee
使用marquee标记可以将文字设置为动态滚动的效果。
【标签说明】
<marquee>滚动文字</marquee>
说明：只要在标记之间添加要进行滚动的文字即可。而且可以在标记之间设置这些文字的字体、颜色等。
【上机实战】
<html>
<head>
<title>添加动态文本</title>
</head>
<body>
<marquee>
<font size="+4" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码，可以看到设置为红色的文字从浏览器的右方缓缓向左滚动，如图7-8所示。
[img]http://www.tu265.com/di-b24f13ecd34a5e701c18075f92430b09.png[/img]
12 楼
lili456 [专家分：0] 发布于 2012-06-07 10:56:00
7.2.2 滚动方向属性——direction
默认情况下文字只能是从右向左滚动，而在实际应用中常常需要不同滚动方向的文字，可以通过direction这一参数来设置。
【标签说明】
<marquee direction="滚动方向">滚动文字</marquee>
说明：该语法中的滚动方向可以包含4个取值，分别为up、down、left和right，他们分别表示文字向上、向下、向左和向右滚动，其中向左滚动left的效果与默认效果相同，而向上滚动的文字则常常出现在网站的公告栏中。
【上机实战】
<html>
<head>
<title>设置动态文本运动方向</title>
</head>
<body>
<marquee>
<font size="+4" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
<marquee direction="up">
<font size="+1" color="#3300CC">欢迎光临我的网站！
<p>希望您浏览愉快！</p>
<p>谢谢您的加入</p>
</font></marquee>
</body>
</html>
【运行效果】
运行这段代码，可以看到文字不同的滚动效果，如图7-9，图中两段文字处于不同的运动状态。
[img]http://www.tu265.com/di-b9eff420460e2ca54433cd97619cd493.png[/img]
13 楼
lili456 [专家分：0] 发布于 2012-06-07 10:58:00
7.2.3 滚动行为——behavior
除了将文字设置为单方向的滚动外，还可以为文字设置滚动方式，如往复运动等。这一功能可以通过添加behavior属性来实现。
【标签说明】
<marquee behavior="滚动方式 ">滚动文字</marquee>
说明：在这里，滚动方式behavior的取值可以设置为表7-1中所示的某个值，不同取值的滚动效果也不相同。
[img]http://www.tu265.com/di-388749c88a6f6fb1051d7dce77215fe2.png[/img]
【上机实战】
<html>
<head>
<title>设置动态文本运动方式</title>
</head>
<body>
<marquee behavior="alternate">
<font size="+4" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
<marquee behavior="scroll">
<font color="#009900" size="+2">谢谢您的加入</font>
</marquee>
<marquee direction="up" behavior="slide">
<font size="+1" color="#3300CC">欢迎光临我的网站！
<p>希望您浏览愉快！</p></font>
</marquee>
</body>
</html>
14 楼
lili456 [专家分：0] 发布于 2012-06-07 11:00:00
【运行效果】
运行这段代码可以看到如图7-10所示的效果。其中第一行文字滚动到浏览器左边缘后开始反方向运动，而第二行文字则在不停的循环一圈一圈的滚动；最后一行文字则在第一次到达浏览器边缘就停止了滚动。
[img]http://www.tu265.com/di-3fe433a0d37b4cc22ab41ebdc70a9a8e.png[/img]
15 楼
lili456 [专家分：0] 发布于 2012-06-07 11:01:00
7.2.4 滚动循环——loop
设置滚动文字后，在默认情况下会不断的循环下去，如果希望当文字滚动几次停止，那么可以使用loop参数来进行设置。
【标签说明】
<marquee loop="循环次数">滚动文字</marquee>
【上机实战】
<html>
<head>
<title>设置动态文本运动方式</title>
</head>
<body>
<marquee behavior="scroll" loop="3">
<font size="+4" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码会发现当文字滚动3个循环之后，滚动文字将不再出现。但是如果设置滚动方式为交替滚动的话，那么在滚动3个循环之后，文字将停留在窗口中，如图7-11所示。
[img]http://www.tu265.com/di-8f0f3c419c86fd95f0cfa47e7a627d5a.png[/img]
16 楼
lili456 [专家分：0] 发布于 2012-06-07 11:02:00
7.2.5 滚动文字的背景颜色——bgcolor
在网页中，为了突出某部分内容，常常使用不同背景色来显示。而滚动文字也可以单独设置背景色。
【标签说明】
<marquee bgcolor="颜色代码">滚动文字</marquee>
说明：文字背景颜色设置为16位颜色码。
【上机实战】
<html>
<head>
<title>设置动态文本背景颜色</title>
</head>
<body>
<marquee behavior="scroll" bgcolor="#99FF99">
<font size="+4" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码，看到在滚动文字后面设置了淡绿色的背景，如图7-12所示。
[img]http://www.tu265.com/di-6a7aa562bc45b621e03fb4dc60b6809d.png[/img]
17 楼
lili456 [专家分：0] 发布于 2012-06-07 11:02:00
7.2.6 滚动文字的背景大小——width、height
如果不设置滚动背景的面积，那么默认情况下，水平滚动的文字背景与文字同高、与浏览器窗口同宽，使用width和height参数可以调整其水平和垂直的范围。
【标签说明】
<marquee width=背景宽度 height=背景高度>滚动文字</maruquee>
说明：此处设置宽度和高度的单位均为像素。
【上机实战】
<html>
<head>
<title>设置动态文本背景颜色</title>
</head>
<body>
<marquee behavior="scroll" bgcolor="#99FF99" width="200px" height="80px" >
<font size="+4" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码，可以看到两段滚动文字的背景高度、宽度的变化，如图7-13所示。
[img]http://www.tu265.com/di-31393e739a19baca0f466956136af549.png[/img]
18 楼
lili456 [专家分：0] 发布于 2012-06-07 11:03:00
7.2.7 滚动速度——scrollamount
在设置滚动文字的时候，文字的滚动速度可以使用scrollamount参数来调整。
【标签说明】
<marquee scrollamount=滚动速度></marquee>
说明：在该语法中，滚动文字的速度实际上是设置滚动文字每次移动的长度，以像素为单位。
【上机实战】
<html>
<head>
<title>设置动态文本滚动速度</title>
</head>
<body>
<marquee scrollamount="3" >
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
<marquee scrollamount="5" >
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码可以看到两行文字同时开始滚动，但是速度是不一样的，设置的scrollamount越大，速度也就越快，如图7-14所示。
[img]http://www.tu265.com/di-55d7f3da20dcbba5d876b46f94f0bf0c.png[/img]
19 楼
lili456 [专家分：0] 发布于 2012-06-07 11:04:00
7.2.8 滚动延迟——scrolldelay
scrolldelay参数可以设置滚动文字滚动的时间间隔。
【标签说明】
<marquee scrolldelay=时间间隔></marquee>
说明：scrolldelay的时间间隔单位是毫秒，也就是千分之一秒。这一时间间隔设置的为滚动两步之间的时间间隔，如果设置的时间比较长会产生走走停停的效果。
如果与滚动速度scrollamount参数结合使用，效果更明显，下面以实例说明。
【上机实战】
<html>
<head>
<title>设置动态文本滚动速度</title>
</head>
<body>
<marquee scrollamount="3" scrolldelay="10" >
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
<marquee scrollamount="5" scrolldelay="5" >
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码的效果如图7-15所示，其中第一行文字设置的延迟大，看上去就像是走一步歇一会儿的感觉，而最后一行设置的延迟比较小，因此走起来比较平滑。
[img]http://www.tu265.com/di-074258960a550221c8d9b9cd20eafa0b.png[/img]
20 楼
lili456 [专家分：0] 发布于 2012-06-07 11:07:00
7.2.9 滚动空间——hspace、vspace
默认情况下，滚动文字周围的文字或图像是与滚动背景紧密连接的，使用参数hspace和vspace可以设置他们之间的空白空间。
【标签说明】
<marquee hspace=水平范围 vspace=垂直范围>滚动文字</marquee>
说明：该语法中水平和垂直范围的单位均为像素。
【上机实战】
<html>
<head>
<title>设置动态文本空白空间</title>
</head>
<body>
<marquee behavior="scroll" bgcolor="#99FF99" hspace="10" vspace="40">
<font size="+2" color="#FF3300">欢迎光临我的网站！</font>
</marquee>
</body>
</html>
【运行效果】
运行这段代码可以看到设置空白空间的效果如图7-16所示。
[img]http://www.tu265.com/di-353b582ece7cc5e8dc64811fa8d2b6a2.png[/img]
我来回复
您所在位置：