<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
font-size: 12px;
line-height: 24px;
text-algin: center; /* 页面内容居中 */
}
* {
margin: 0px;
padding: 0px; /* 去掉所有标签的marign和padding的值 */
}
#box{
width:410px;
height: 230px;
margin: 0 auto;
margin-top: 50px;
border: 5px solid gray;
border-radius: 10px;
overflow: hidden;
}
#box h3{
background: red;
height: 65px;
line-height: 65px;;
color: white;
font-size:25px;
padding:10px;
padding-left: 20px;
margin-top:0;
}
#box h3 a{
font-size: 10px;
text-decoration: none;
float: right;
color: white;
}
#moocBox{
width: 410px;
height: 150px;
margin-top: 5px;
overflow: hidden;
}
#moocBox ul{
list-style-type: none;
padding: 0 40px;
}
#moocBox ul li{
margin-top: 5px;
height: 24px;
}
#moocBox ul li a{
text-decoration: none;
color:black;
font-size: 12px;
}
#moocBox ul li a:hover{
color:red;
}
#moocBox ul span{
color: gray;
float: right;
}
</style>
</head>
<body>
<div id="box">
<h3>最新课程 <a href="#">更多》》</a></h3>
<div id="moocBox">
<ul id="cn1">
<li><a href="#">1.学会html5 绝对的屌丝逆袭(案例)</a><span>2013-09-18</span></li>
<li><a href="#">2.tab页面切换效果(案例)</a><span>2013-10-09</span></li>
<li><a href="#">3.圆角水晶按钮制作(案例)</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分页页码制作(案例)</a><span>2013-11-06</span></li>
<li><a href="#">6.导航条菜单的制作(案例)</a><span>2013-11-08</span></li>
<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
var box=document.getElementById("moocBox");
box.innerHTML+=box.innerHTML;
var iHegiht=24;
function startMove(){
box.scrollTop++;
time=setInterval("scrollUp()",50)
}
function scrollUp(){
box.scrollTop++;
if(box.scrollTop % iHegiht==0){
clearInterval(time);
setTimeout("startMove()",2000)
}else{
box.scrollTop++;
if (box.scrollTop>=box.offsetHeight/2) {
box.scrollTop=0;
}
}
}
setTimeout("startMove()",2000);//初始化
</script>
</html>