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

10-1練習(xí)參考代碼CSS設(shè)置問題

ul不是本來就是block嗎，為什么還要設(shè)置為block？

li在后面設(shè)置為了display:inline-block，應(yīng)該已經(jīng)達(dá)到橫向排列效果了，為什么要還設(shè)置float:left？

我把這兩條代碼刪了以后出現(xiàn)的效果是一樣的沒有變化。

<!DOCTYPE html> ? ?
<html> ? ?
<head lang="en"> ? ?
<meta charset="UTF-8"> ? ?
<title>實踐題 - 選項卡</title> ? ?
<style type="text/css"> ? ?
*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";} ? ?
#tabs {width:290px;padding:5px;height:150px;margin:20px;} ? ?
#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;} ? ?
#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;} ? ?
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;} ? ?
#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;} ? ?
.hide{display: none;} ? ?
</style> ? ?
<script type="text/javascript"> ? ?
window.onload = function(){ ? ?
var oTab = document.getElementById("tabs"); ? ?
var oUl = oTab.getElementsByTagName("ul")[0]; ? ?
var oLis = oUl.getElementsByTagName("li"); ? ?
var oDivs= oTab.getElementsByTagName("div"); ? ?

for(var i= 0,len = oLis.length;i<len;i++){ ? ?
oLis[i].index = i; ? ?
oLis[i].onclick = function() { ? ?
for(var n= 0;n<len;n++){ ? ?
oLis[n].className = ""; ? ?
oDivs[n].className = "hide"; ? ?
} ? ?
this.className = "on"; ? ?
oDivs[this.index].className = ""; ? ?
} ? ?
}; ? ?
} ? ?
</script> ? ?

</head> ? ?
<body> ? ?
<div id="tabs"> ? ?
<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)房<br> ? ?
</div> ? ?
<div class="hide"> ? ?
40平出租屋大改造美少女的混搭小窩<br> ? ?
經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br> ? ?
新中式的酷色溫情 66平撞色活潑家居<br> ? ?
瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計<br> ? ?

</div> ? ?
<div class="hide"> ? ?
通州豪華3居260萬二環(huán)稀缺2居250w甩<br> ? ?
西3環(huán)通透2居290萬 130萬2居限量搶購<br> ? ?
黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br> ? ?
獨家別墅280萬蘇州橋2居優(yōu)惠價248萬<br> ? ?

</div> ? ?
</div> ? ?

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