為什么我這個(gè)不能像老師那樣向上移動(dòng)了，求指點(diǎn)
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>無(wú)縫滾動(dòng)</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>匆匆那年我們 究竟說(shuō)了幾遍 再見(jiàn)之后再拖延</li>
? ? ? ? ? ?<li>可惜誰(shuí)有沒(méi)有 愛(ài)過(guò)不是一場(chǎng) 七情上面的雄辯</li>
? ? ? ? ? ?<li>匆匆那年我們 一時(shí)匆忙撂下 難以承受的諾言</li>
? ? ? ? ? ?<li>只有等別人兌現(xiàn)</li>
? ? ? ? ? ?<li>不怪那吻痕還 沒(méi)積累成繭</li>
? ? ? ? ? ?<li>擁抱著冬眠也沒(méi)能 羽化再成仙</li>
? ? ? ? ? ?<li>不怪這一段情 沒(méi)空反復(fù)再排練</li>
? ? ? ? ? ?<li>是歲月寬容恩賜 反悔的時(shí)間</li>
? ? ? ? ? ?<li>如果再見(jiàn)不能紅著眼 是否還能紅著臉</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>無(wú)縫滾動(dòng)</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????/*??這個(gè)一定要加，超出的內(nèi)容部分要隱藏，免得撐高中間部分?*/ } ???????#Box?li{ ???????????width:?400px; float:?left; display:?block; overflow:?hidden;???/*??這個(gè)一定要加，超出的內(nèi)容部分要隱藏?*/ text-indent:?15px; height:?24px; } ???</style> </head> <body> <div?id="mooc"> ???<div?id="Box"> ???????<ul?id="con1"> ???????????<li>匆匆那年我們?究竟說(shuō)了幾遍?再見(jiàn)之后再拖延</li> ???????????<li>可惜誰(shuí)有沒(méi)有?愛(ài)過(guò)不是一場(chǎng)?七情上面的雄辯</li> ???????????<li>匆匆那年我們?一時(shí)匆忙撂下?難以承受的諾言</li> ???????????<li>只有等別人兌現(xiàn)</li> ???????????<li>不怪那吻痕還?沒(méi)積累成繭</li> ???????????<li>擁抱著冬眠也沒(méi)能?羽化再成仙</li> ???????????<li>不怪這一段情?沒(méi)空反復(fù)再排練</li> ???????????<li>是歲月寬容恩賜?反悔的時(shí)間</li> ???????????<li>如果再見(jiàn)不能紅著眼?是否還能紅著臉</li> ???????</ul> ???????<ul?id="con2"></ul> ???</div> </div> <script?type="text/javascript"> var?area?=?document.getElementById('Box'); area.scrollTop=20; </script> </body> </html>以上是我修改后的代碼
第一個(gè)是沒(méi)有在正確的地方用到overflow:hidden,代碼里我也注釋了
第二個(gè)是你沒(méi)有定義這個(gè)li的CSS樣式
第三個(gè)是你的BOX高度要比li的總高度小
呃,具體方面我的理解我不太會(huì)表述,就希望你看我修改后的代碼然后再看看老師的視頻,結(jié)合下自己思考思考吧。