                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

嗨呀，为什么不滚动呢？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{
margin: 0;padding: 0;
}
#box{
position: absolute;
top: 20%;
left: 30%;
width: 450px;
height: 260px;
margin: auto;
border: 2px solid #8b4c14;
border: 6px solid gainsboro;
border-radius: 40px;
}
a{
text-decoration:none ;
color: darkred;
}
#box_top{
width: 100%;
height: 100px;
background: chocolate;
text-align: center;
line-height: 100px;
font-size: 30px;
position: relative;
border-top-left-radius: 35px;
border-top-right-radius: 35px;
}
#box_top #more{
position: absolute;
font-size: 20px;
width: 20%;
height: 50%;
right: 0;
bottom: 20px;
text-align: center;
}
#box_bottom{
width: 100%;
height: 160px;
text-align: center;
overflow: hidden;
}

#box_bottom a{
display: inline-block;
width:50%;
text-align:left ;
color:darkorchid;
}
.hide{visibility: hidden;
}

</style>
</head>
<script>
var area=document.getElementById("box_bottom");
area.scrollTop=30;
</script>
<body>
<div id="box">
<div id="box_top">慕课网最新课程<div id="more"> <a href="#">更多>></a></div></div>
<div id="box_bottom">
<ul id="ul1" type="1">
<li><a href="#">学会HTML5绝对的屌丝逆袭</a><span>2016.01.01</span></li>
<li><a href="#">tab页面切换效果（案例）</a><span>2016.02.02</span></li>
<li><a href="#">圆角水晶按钮制作（案例）</a><span>2016.03.03</span></li>
<li><a href="#">HTML+CSS基础课程</a><span>2016.04.04</span></li>
<li><a href="#">分页页码制作（案例）</a><span>2016.05.05</span></li>
<li><a href="#">导航条菜单的制作（案例）</a><span>2016.06.06</span></li>
<li><a href="#">信息列表制作（案例）</a><span>2016.07.07</span></li>
<li><a href="#" class="hide">隐藏部分</a><span class="hide">2016.02.03</span></li>
<li><a href="#" class="hide">yinchangbufen></a><span class="hide" >2016.03.03</span></li>
</ul>
<ul id="ul2"></ul>

</div>
</div>

</body>
</html>