zoukankan      html  css  js  c++  java
  • 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>

     结果如下:显示一个向左滑动的相册[来回滚动]

  • 相关阅读:
    gitlab安装笔记二_Centos7配置163yum源
    gitlab安装笔记一_虚拟机中安装Centos7
    初篇:我与Linux
    Redis分布式锁正确的实现方法
    MacOS从零开始搭建hexo博客
    docker服务编排--docker-compose
    多线程问题整理
    maven依赖范围
    linux打开文件数 too many open files 解决办法
    【数据结构】队列-数组模拟队列
  • 原文地址:https://www.cnblogs.com/wooyoohoo/p/9463753.html
Copyright © 2011-2022 走看看