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

有關CSS的細節(jié)

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">

?????/*?CSS樣式制作?*/??
?
#tab?ul{
list-style:none;display:block;margin:0px?0px;padding:0px?10px;height:25px;line-height:30px;}
#tab?ul?li{
display:inline-block;font:12px?"微軟雅黑";border:1px?solid?#999;padding:3px?20px;border-bottom:none;text-align:center;float:left;margin:0px?2px;}
#tab?ul?li.on{
border-top:3px?solid?#900;border-bottom:3px?solid?#fff;margin:0px?3px;}
#tab?div{
font:14px?"微軟雅黑";border:solid?1px?#CCC;border-top:#900?solid?3px;margin:0px;padding:10px;width:255px;}
#tab?.hide{display:none;}
????</style>
????<script?type="text/javascript">

????//?JS實現(xiàn)選項卡切換
window.onload=function(){
????var?ntab=document.getElementById("tab");
var?li=document.getElementsByTagName("li");
var?div=ntab.getElementsByTagName("div");

for(i=0;i<li.length;i++){
li[i].nos=i;
li[i].onclick=?function(){
for(n=0;n<li.length;n++){
li[n].className="";
div[n].className="hide";
}
this.className="on";
div[this.nos].className="";
}
}
}
????</script>
?
</head>
<body>

<!--?HTML頁面布局?-->
<div?id="tab">
????<ul>
????????<li>房產(chǎn)</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????275萬購昌平鄰鐵三居?總價20萬買一居<br>
????200萬內購五環(huán)三居?140萬安家東三環(huán)<br>
????北京首現(xiàn)零首付樓盤?53萬購東5環(huán)50平<br>
????京樓盤直降5000?中信府?公園樓王現(xiàn)房<br>
????</div>
????<div>
?????40平出租屋大改造?美少女的混搭小窩<br>
?????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br>
?????新中式的酷色溫情?66平撞色活潑家居<br>
?????瓷磚就像選好老婆?衛(wèi)生間煙道的設計<br>
????</div>
????<div>
?????通州豪華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萬<br>
????</div>
</div>
</body>
</html>

用了好久，還看了不少人寫的，最后不知道為何總是未選中的選項卡和內容框總有那么一個小縫，想知道究竟怎么調CSS才能讓那個縫隙減小。