走马灯标签
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;
width: 980px;
height: 185px;
background-color: #888888;
}
.pao ul li
{
width: 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>
