关于无缝滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatile" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<style>
* {margin: 0;padding: 0;}
li {
list-style: none;
margin-top: 10px;
}
p {
margin-left: 350px;
margin-top: 10px;
cursor: pointer;
}
ul {
margin-bottom: 0;
text-indent: 3em;
border: 1px solid transparent;
}
#warpper {
margin:50px auto;
width: 450px;
border: 3px solid #bbb;
border-radius: 10px;
overflow: hidden;
}
.nav {
position: relative;
text-indent: 2em;
height: 80px;
line-height: 80px;
}
#movebox {
height: 230px;
overflow: hidden;
}
.pull-left{
float: left;
}
.pull-right {
float: right;
margin-right: 20px;
}
.
</style>
<title>信息滚动</title>
</head>
<body>
<div id="warpper">
<div class="nav bg-primary">
<h1>慕课网最新课程</h1>
<p>更多>></p>
</div>
<div id="movebox">
<ul id="list1">
<li><a href="#1">1.HTML</a> <span>2013-11-01</span></li>
<li><a href="#2">2.CSS</a><span>2013-11-06</span></li>
<li><a href="#3">3.JavaScript</a><span>2013-11-08</span></li>
<li><a href="#4">4.HTML5</a><span>2013-11-10</span></li>
<li><a href="#5">5.CSS3</a><span>2013-11-11</span></li>
<li><a href="#6">6.bootstrap</a><span>2013-11-12</span></li>
<li><a href="#7">7.jQuery</a><span>2013-11-13</span></li>
<li><a href="#9">8.Ajax</a><span>2013-11-14</span></li>
</ul>
<ul id="list2">
</ul>
</div>
</div>
<script>
var box = document.getElementById('movebox'),
list1 = document.getElementById('list1'),
list2 = document.getElementById('list2');
time = 50;
list2.innerHTML = list1.innerHTML;
function scroll() {
if(box.scrollTop >= list1.offsetHeight) {
box.scrollTop = 0;
}
else {
box.scrollTop++;
}
}
setInterval(scroll,time)
</script>
</body>
</html>求解：1.教程里边的源码并没有设置ul的border；
2.为什么我的全局声明*{margin:0;padding:0}对ul无效了，还要单独设置margin-bottom:0;
说明：1.如果我不设置ul的border就做不大无缝滚动；
2.不设置margin-bottom，两个ul间有间距；
望大神解答，万分感谢！！
