                        課程
                    
                        /前端開發(fā)
                        
                            /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">慕課網(wǎng)最新課程<div id="more"> <a href="#">更多>></a></div></div>
? ?<div id="box_bottom">
? ? ? ?<ul id="ul1" type="1">
? ? ? ? ? ?<li><a href="#">學(xué)會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基礎(chǔ)課程</a><span>2016.04.04</span></li>
? ? ? ? ? ?<li><a href="#">分頁頁碼制作（案例）</a><span>2016.05.05</span></li>
? ? ? ? ? ?<li><a href="#">導(dǎo)航條菜單的制作（案例）</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>