                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么對ul加上height就可以使上下兩塊分離，不加的話，ul就跑到了div框里？

<!DOCTYPE?html>
<html>
<head?><lang="en"></lang>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/?
?????/**
?????cursor:pointer;手型光標
?????**/
????*{margin:0;padding:0;font-size:14px;font-family:宋體;}
????#d{
????????width:290px;height:150px;padding;10px;margin:20px;
????}
????#d?ul{
????????list-style:none;display:block;line-height:30px;height:1px;
????}
????#d?ul?li?{?
????????float:left;width:60px;height:30px;line-height:30px;margin:0px?3px?;border:1px?solid?gray;border-bottom:none;text-align:center;???cursor:pointer;???display:inline-block;
????}?
????#d?ul?li.on{
????????border-top:2px?solid?#f11;border-bottom:2px?solid?#fff;
????}
????#d?div{
????????height:120px;line-height:25px;border:1px?solid?gray;border-top:2px?solid?#f11;?padding:5px;margin-top:30px;
????}
????.hide{display:none;}
????li:hover{background-color:#f60;}
?????
????</style>
????
????<script?type="text/javascript">
?????????//?JS實現(xiàn)選項卡切換
????window.onload=function(){
????????var?d=document.getElementById("d");
????????var?li=document.getElementsByTagName("li");
????????var?div=d.getElementsByTagName("div");

????????for(var?i=0;i<li.length;i++){
?????????????li[i].index=i;
?????????????li[i].onclick=function(){
?????????????????for(var?n=0;n<li.length;n++){
?????????????????????li[n].className="";
?????????????????????div[n].className="hide";
?????????????????}
?????????????????this.className="on";
?????????????????div[this.index].className="";
?????????????}
????????}
??????
????
????}
????</script>
??
</head>
<body>
<!--?HTML頁面布局?-->
<div?id="d">
????<ul>
???????<li?class="on">房產(chǎn)</li>???????
???????<li>家居</li>
???????<li>二手房</li>
????</ul>
?????<div>
????????????????????????275萬購昌平鄰鐵三居?總價20萬買一居<br/>
????????????????????????200萬內(nèi)購五環(huán)三居?140萬安家東三環(huán)<br/>
????????????????????????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平<br/>
????????????????????????京樓盤直降5000?中信府?公園樓王現(xiàn)房</div>??
?????<div?class="hide">?
????????????????????????40平出租屋大改造?美少女的混搭小窩<br/>
????????????????????????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br/>
????????????????????????新中式的酷色溫情?66平撞色活潑家居<br/>
????????????????????????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計</div>????????
?????<div?class="hide">?
????????????????????????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br/>
????????????????????????西3環(huán)通透2居290萬?130萬2居限量搶購<br/>
????????????????????????黃城根小學學區(qū)僅260萬?121平70萬拋!<br/>
????????????????????????獨家別墅280萬?蘇州橋2居優(yōu)惠價248萬</div>????

</div>
?
</body>
</html>