有關(guān)CSS的細(xì)節(jié)
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title>實(shí)踐題?-?選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換 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萬購昌平鄰鐵三居?總價(jià)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> ?????40平出租屋大改造?美少女的混搭小窩<br> ?????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br> ?????新中式的酷色溫情?66平撞色活潑家居<br> ?????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)<br> ????</div> ????<div> ?????通州豪華3居260萬?二環(huán)稀缺2居250w甩<br> ?????西3環(huán)通透2居290萬?130萬2居限量搶購<br> ?????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br> ?????獨(dú)家別墅280萬?蘇州橋2居優(yōu)惠價(jià)248萬<br> ????</div> </div> </body> </html>
用了好久,還看了不少人寫的,最后不知道為何總是未選中的選項(xiàng)卡和內(nèi)容框總有那么一個(gè)小縫,想知道究竟怎么調(diào)CSS才能讓那個(gè)縫隙減小。
2017-02-25
#tab ul li里面border-bottom:none;改成border-bottom:3px solid #fff; 未設(shè)置底邊距未撐開