走马灯标签

1.marquee标签    跑马灯

   direction="down" 方向
   scrollamount="1" 速度
   behaviro="alternate" 行为往返运动 scroll 转圈 slide 停靠
   loop 循环 -1无限对 slide无效
   onmouseover="this.stop()" 鼠标移上去就停止了
   onmouseout="this.start()" 鼠标移除就就开始了

   display : inline-block; 有宽高。不换行 img
   div display : block    有宽高，换行
   a display :inline 无宽高不换行

    例子：

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯</title>
    <style type="text/css">

        *{margin: 0px; padding: 0px; list-style-type: none}
            .pao{
                    display: block;
                    margin: 0px auto;
                    padding: 10px;
                    980px;
                    height: 185px;
                    background-color: #888888;
            }
            .pao ul li
            {
                150px;
                height: 185px;
                float: left;
                margin-right: 10px;
                background-color: #993300;
                overflow: hidden;
            }

        .pao ul li a
        {
            position: relative;
            left: 0px;
            top: 0px;
        }
        .pao ul li a:hover
        {
            left: 2px;
            top: 2px;

        }
    </style>
</head>
<body>
<marquee class="pao" behaviro="alternate" onmouseover="this.stop()" onmouseout="this.start()">
         <ul>
             <li><a><img src="../img/QQ图片20160913204411.jpg" height="185" width="180"/> </a></li>
             <li><a> <img src="../img/QQ图片20160913204421.jpg" height="185" width="180"/></a></li>
             <li><a><img src="../img/QQ图片20160913204713.jpg" height="185" width="180"/> </a></li>
             <li><a><img src="../img/QQ图片20160913204906.jpg" height="185" width="180"/> </a></li>
         </ul>
     </marquee>
</body>
</html>