為什么我這個不能像老師那樣向上移動了，求指點
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>無縫滾動</title>
? ?<style>
*{
? ? ? ? ? ?margin: 0;
padding:0;
}
? ? ? ?#mooc{
? ? ? ? ? ?border: 1px solid red;
background-color: ghostwhite;
width: 500px;
height: 150px;
overflow: hidden;
margin: 100px auto;
}
? ? ? ?#Box{
? ? ? ? ? ?width: 450px;
line-height: 1.5em;
text-align: center;
border: 1px solid blueviolet;
padding-top: 4px;
height: 222px;
margin: auto;
}
? ? ? ?#Box li{
? ? ? ? ? ?list-style: none;
}
? ?</style>
</head>
<body>
<div id="mooc">
? ?<div id="Box">
? ? ? ?<ul id="con1">
? ? ? ? ? ?<li>匆匆那年我們 究竟說了幾遍 再見之后再拖延</li>
? ? ? ? ? ?<li>可惜誰有沒有 愛過不是一場 七情上面的雄辯</li>
? ? ? ? ? ?<li>匆匆那年我們 一時匆忙撂下 難以承受的諾言</li>
? ? ? ? ? ?<li>只有等別人兌現</li>
? ? ? ? ? ?<li>不怪那吻痕還 沒積累成繭</li>
? ? ? ? ? ?<li>擁抱著冬眠也沒能 羽化再成仙</li>
? ? ? ? ? ?<li>不怪這一段情 沒空反復再排練</li>
? ? ? ? ? ?<li>是歲月寬容恩賜 反悔的時間</li>
? ? ? ? ? ?<li>如果再見不能紅著眼 是否還能紅著臉</li>
? ? ? ?</ul>
? ? ? ?<ul id="con2"></ul>
? ?</div>
</div>
<script type="text/javascript">
var area = document.getElementById('Box');
area.scrollTop =30;
</script>
</body>
</html>
2017-04-15
<!DOCTYPE?html> <html> <head> ???<meta?charset="UTF-8"> ???<title>無縫滾動</title> ???<style> *ul{ list-style:none; } *{ ???????????margin:?0; padding:0; } ???????#mooc{ ???????????border:?1px?solid?red; background-color:?ghostwhite; width:?500px; margin:?100px?auto; } ???????#Box{ ???????????width:?450px; line-height:?1.5em; text-align:?center; border:?1px?solid?blueviolet; padding-top:?4px; height:?144px; margin:?auto; overflow:hidden????/*??這個一定要加，超出的內容部分要隱藏，免得撐高中間部分?*/ } ???????#Box?li{ ???????????width:?400px; float:?left; display:?block; overflow:?hidden;???/*??這個一定要加，超出的內容部分要隱藏?*/ text-indent:?15px; height:?24px; } ???</style> </head> <body> <div?id="mooc"> ???<div?id="Box"> ???????<ul?id="con1"> ???????????<li>匆匆那年我們?究竟說了幾遍?再見之后再拖延</li> ???????????<li>可惜誰有沒有?愛過不是一場?七情上面的雄辯</li> ???????????<li>匆匆那年我們?一時匆忙撂下?難以承受的諾言</li> ???????????<li>只有等別人兌現</li> ???????????<li>不怪那吻痕還?沒積累成繭</li> ???????????<li>擁抱著冬眠也沒能?羽化再成仙</li> ???????????<li>不怪這一段情?沒空反復再排練</li> ???????????<li>是歲月寬容恩賜?反悔的時間</li> ???????????<li>如果再見不能紅著眼?是否還能紅著臉</li> ???????</ul> ???????<ul?id="con2"></ul> ???</div> </div> <script?type="text/javascript"> var?area?=?document.getElementById('Box'); area.scrollTop=20; </script> </body> </html>以上是我修改后的代碼
第一個是沒有在正確的地方用到overflow:hidden,代碼里我也注釋了
第二個是你沒有定義這個li的CSS樣式
第三個是你的BOX高度要比li的總高度小
呃,具體方面我的理解我不太會表述,就希望你看我修改后的代碼然后再看看老師的視頻,結合下自己思考思考吧。