HTML的<marquee>标签怎么用?

在HTML中,<marquee>标签用于在网页中创建滚动文本或图像;可以从水平向左或向右或向右或向左滚动,也可以从上到下或从下到上滚动。

marquee元素是成对出现的,下面是<marquee>标签的一些属性列表:

7fd7539b5844847677e73ca31896730.png

示例1:

<!DOCTYPE html> 
<html> 
	<head> 
	   	<meta charset="UTF-8">
	   	<title>Marquee标签</title> 
    <style> 
    .main { 
        text-align:center; 
    } 
    .marq { 
        padding-top:30px; 
        padding-bottom:30px; 
    } 
    .hello { 
        font-size:36px; 
        font-weight:bold; 
        color:white; 
        padding-bottom:10px; 
    } 
    </style> 
</head>  
  
<body> 
    <div class = "main"> 
    <marquee class="marq" bgcolor = "pink" direction = "left" loop="" > 
        <div class="hello">Hello World!</div> 
    </marquee> 
    </div> 
</body> 
</html>

效果图:

1.gif

示例2:

<!DOCTYPE html> 
<html> 
	<head> 
	   	<meta charset="UTF-8">
	   	<title>Marquee标签</title> 
    <style> 
    .main { 
        text-align:center; 
    } 
    .marq { 
        padding-top:30px; 
        padding-bottom:30px; 
    } 
    .hello { 
        font-size:36px; 
        font-weight:bold; 
        color:white; 
        padding-bottom:10px; 
    } 
    </style> 
</head>  
  
<body> 
    <div class = "main"> 
    <marquee class="marq" bgcolor = "pink" direction = "up" loop="" > 
        <div class="hello">Hello World!</div> 
    </marquee> 
    </div> 
</body> 
</html>

效果图:

2.gif

示例3:

<!DOCTYPE html> 
<html> 
	<head> 
	   	<meta charset="UTF-8">
	   	<title>Marquee标签</title> 
    <style> 
    .main { 
        text-align:center; 
    } 
    .marq { 
    	height: 100px;
        padding:20px; 

    } 
    .hello { 
        font-size:36px; 
        font-weight:bold; 
        color:white; 
    } 
    </style> 
</head>  
  
<body> 
    <div class = "main"> 
    <marquee class="marq" bgcolor = "pink" direction = "down" loop="" > 
        <div class="hello">Hello World!</div> 
    </marquee> 
    </div> 
</body> 
</html>

效果图:

3.gif

以上就是HTML的<marquee>标签怎么用?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

1/1