欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

marquee标签的使用

程序员文章站 2022-06-19 23:26:51
演示marquee ......
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>演示marquee</title>

    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        
        marquee{
            border: 1px solid purple;
        }

        img{
            width: 360px;
            height: auto;
        }
    </style>
</head>
<body>

    <!-- 
        direction 表示滚动的方向,值可以是left,right,up,down,默认为left;
        behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动);
        loop 表示循环的次数,值是正整数,默认为无限循环;
        scrollamount 表示运动速度,值是正整数,默认为6;
        scrolldelay 表示停顿时间,值是正整数,默认为0,单位是秒;
        valign 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle;
        align 表示元素的水平对齐方式,值可以是absbottom:绝对底部对齐(与g、p等字母的最下端对齐),absmiddle:绝对*对齐,baseline:底线对齐,bottom:底部对齐(默认),left:左对齐,middle:中间对齐,right:右对齐,texttop:顶线对齐,top:顶部对齐;
        bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色;
        height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度;
        hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素; 
    -->

    <marquee direction="left" behavior="alternate" valign="middle" align="absmiddle" scrollamount="10" width="366px">
        <img src="./back1.jpg">
        <img src="./back2.jpg">
        <img src="./back3.jpg">
        <img src="./back4.jpg">
        <img src="./back5.jpg">
        <img src="./back6.jpg">
        <img src="./back7.jpg">
    </marquee>
</body>
</html>