实例教程：HTML中会移动的文字
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实例教程：HTML中会移动的文字相关的知识，希望对你有一定的参考价值。
参考技术A我们在浏览页面的时候，会看到在页面上移动的文字，文字的移动方向有从左到右、从右到左、从上到下、从下到上等。下面，我们来看看如何使用html代码编写会移动的文字吧。
工具/材料
HTML
语法代码
（1）一般使用<marquee></marquee>来设置移动文字，比如我们编写如下代码：
（2）<marquee>会移动的文字</marquee>
预览效果可以发现编写在<marquee></marquee>标签内的文字，会从右边到左边循环移动，如下图所示：
文字移动速度
（1）使用scrollamount来设置文字的移动速度，比如我们编写如下所示代码：
<marquee scrollamount=16>快点，快点</marquee>
<marquee scrollamount=12>等等我</marquee>
（2）预览效果
可以看到scrollamount的数值越大，移动的速度就会越快，如下图所示：
设置文字移动的方向
（1）direction在英文上是方向的意思，同样使用direction来设置文字的移动方向，方向可以设置为左、右、上、下等等，编写如下代码：
<marquee direction=left>文字从右边向左边</marquee> <P>
<marquee direction=right>从左边向右边移</marquee>
（2）预览效果
可以看到当direction=left时，文字从右边向左边，当direction=right时，文字从左边向右边，如下图所示：
文字循环的次数
（1）一般来说文字是默认无限次循环的，下面，我们来看看如何指定文字的循环次数吧。使用loop来设置文字的循环次数，比如编写代码如下：
<marquee loop=3 >文字只会循环三次</marquee>
（2）预览效果
可以在浏览器上看到，文字只会循环三次，如下图所示：
文字对齐
在HTML中的文字对齐功能，使用align属性来设置，属性值可以为top、Middle、button，比如我们编写如下所示的代码：
（2）预览效果
然后在浏览器中预览效果，可以看到文字向上对齐，如下图所示：
移动面积
（1）设置会移动的文字范围，比如文字在长为多少，宽为多少的区域内移动，比如我们编写如下代码：
<marquee height=40 width=50% bgcolor=pink>在区域内移动的文字</marquee>
（2）预览效果
在浏览器中可以看到文字在高为40，宽为浏览器一半的区域内移动，且区域的颜色为粉红色，如下图所示：
延时
（1）设置文字的运行速度，让文字可以时而快，时而慢地做运动，编写代码如下所示：
（2）预览效果
在浏览器中预览效果，可以看到文字先做快速度，然后做慢速度，如下图所示：
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
本教程案例在线演示
免费配套视频教程
教程配套源码资源
字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 设置所有字体属性 font:italic bold 36px "宋体";
font-family属性
.p1{ font-family: "隶书";}
.p2{font-family: "黑体"; }
.p3{ font-family: "Arial Black"; }
font-size属性
单位：px（像素）
.p1{font-size: 10; }
.p2{font-size: 20px;}
.p3{font-size: 30px;}
font-style属性
normal、italic和oblique
字体的粗细
font-weight属性
normal 默认值，定义标准的字体。
bold 粗体字体。
font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}
文本样式文本属性
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
文本颜色
color属性
十六进制方法表示颜色
color:#FFFFFF;
color:#000000;
color:FF0000;
color:#A983D8;
color:#95F141;
color:#339966;--- color:#396;
color:#EEFF66;--- color:#EF6;
6位颜色值相邻数字两两相同时，可两两缩写为1位
水平对齐方式
text-align属性
值 说明
left 把文本排列到左边。
right 把文本排列到右边
center 把文本排列到中间
首行缩进
text-indent：px
行高
line-height：px
文本装饰
text-decoration属性
值 说明
none 默认值，定义的标准文本。
underline 设置文本的下划线。
overline 设置文本的上划线。
line-through 设置文本的删除线。
垂直对齐方式
vertical-align属性：middle、top、bottom
实践-制作总裁致辞页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>总裁致辞</h1>
<h3>来源：来自东部数据</h3>
<hr/>
<p><img src="image/icon.jpg" alt="总裁致辞" width="176" height="108" />
9月16日下午，东部控股副总裁、东部数据教育公司总裁张家林老师相继来到黑龙江外国语学院和哈尔滨学院，
分别向两个高校的学子们分享了<strong>“怀揣梦想 创造未来—服务外包人才的成长之路”</strong>以及<strong>“互联网+时代IT人才的成长之路”</strong>的主题演讲。
</p>
<p>演讲开始，张家林总裁指出随着“互联网+”时代的来临，信息技术进一步推动服务外包需求变革，
以<strong>大数据、物联网、移动互联网、云计算</strong>为代表的新一代信息技术正在加速与传统产业融合发展，
基于信息化、互联化的新兴商业模式正在重新构建。
接下来，张家林总裁提出IT及服务外包产业具有知识性、专业性、实践性的特点，决定了该产业必然是智力型、应用型人才云集之地；
产业国际化亟需兼备技术和语言能力并能够跨文化沟通的人才。
近年国内毕业生数量持续快速增长，面临着就业愈加困难的窘迫，同时企业和高校也陷入了人才需求和人才输出的“囚徒困境”中。
面对严峻的就业现实，张家林总裁着重给出了对大学生的建议：“不断提升自己的软技能和硬技能，做好职业生涯规划，从现在开始职涯历程的起点；
聚焦IT方向，打好基础，积累相应的工作经验，为就业做好充分准备。”
</p>
</body>
</html>
伪类
伪类选择元素基于的是当前元素处于的状态。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
:hover
伪类将应用于有鼠标指针悬停于其上的元素。
语法：
标签名:伪类名{声明;}
a:hover
{
color:#B46210;
text-decoration:underline;
}
伪类应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: red;
}
p:hover {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body><a href="#">中华培训</a>
<p>产融教育</p></body>
</html>
网页背景颜色
background-color
列表样式
去掉圆点
list-style:none
Web字体
Font Awesome---提供可缩放矢量图标
官网地址：http://www.fontawesome.com.cn/
使用步骤
1.引入css
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
2.你可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。
3.Font Awesome 被设计为用于行内元素（我们喜欢用更简短的标签，它的语义更加精准）。
4.如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
<style>
a{
font-size: 30px;
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<p>
<a href="#"><i class="fa fa-battery-2"></i>首页</a>
<a href="#"><i class="fa fa-camera-retro"></i>首页</a>
</p>
</body>
</html>
以上是关于实例教程：HTML中会移动的文字的主要内容，如果未能解决你的问题，请参考以下文章
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
《HTML基础教程》——网络安全入门绕不过的一道坎, 内附常见标签及实例( 建议收藏!!!)
《ArcGIS Engine+C#实例开发教程》第五讲 鹰眼的实现