• HTML基础 marquee div块实现循环跑马灯的效果


                 OS : Windows 10
            browser : Chrome 83.0.4103.116
             editor : Visual Studio Code 1.46.1       
        typesetting : Markdown
    

    html

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <!-- marquee 标签,知道就好。不推荐使用 -->
        <!-- w3cschool 找不到该标签 -->
    
        <!--
            direction 向哪里动
                up down left right
            width        滚动宽度
            height       滚动高度
            bgcolor      滚动背景色
            scroolamount 滚动步长值
            scrolldelay  两步之间的停留时间(ms)
            loop         循环滚动的次数
    
          -->
    
        <marquee direction="up" scrollamount="100" width="600" height="400" scrolldelay="1000">
            <div style=" 100px;height: 100px;background-color: burlywood;"></div>
        </marquee>
    
    </body>
    
    </html>
    
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee -->
    

    result

    • 方块自下而上的循环滚动

    resource

    • [ 教程 ] www.w3school.com.cn/html/index.asp
    • [ 手册 ] www.w3cschool.cn/html5_reference.html
    • [ 规范 ] www.runoob.com/html/html5-syntax.html
    • [ 平台 ] www.cnblogs.com
    • [ 规范-参考 ] www.w3cschool.cn/wematy
    • [ 统计-参考 ] tongji.baidu.com/research/site#browser


    感恩曾经帮助过 客名利 的人。
    html,xhtml和html5的发展历史及其特性,建议学习。
    代码的书写是有规范的,适当地遵守规范,助人助己。
    Chromium和Firefox是开源浏览器,新功能众多,建议关注。
    Blink,EdgeHTML,Gecko,KHTML,Trident,WebCore,WebKit等,空闲时可以了解一下。
    不同的浏览器解析代码是有差别的,要多关注兼容性问题。

  • 相关阅读:
    UWP开发必备:常用数据列表控件汇总比较
    CodeForces 372 A. Counting Kangaroos is Fun
    ubuntu 13.10 eclipse 菜单栏不可用的问题
    Codeforces Round #219(Div. 2)373 B. Making Sequences is Fun(二分+找规律)
    Git/Github使用方法小记
    Ubuntu 下jdk的安装
    VIM简明教程
    codeforces 371 C-Hamburgers
    codeforces 371A K-Periodic Array
    计算机网络中IP地址和MAC地址
  • 原文地址:https://www.cnblogs.com/kemingli/p/13252501.html
Copyright © 2020-2023  润新知