點擊之后的li下邊框覆蓋ul的下邊框，為什么覆蓋不了呢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>話費充值</title>??
<style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? ?*{padding: 0px;margin: 0px;}
? ? ? ?ul{background:gray;list-style: none;overflow: hidden;border-bottom: 2px solid darkred;height: 40px;}
? ? ? ?#tab ul li{display:inline-block;border: 2px solid cornflowerblue;float:left;line-height:38px;margin: 0px 10px;border-bottom: none;}
? ? ? ?#tab{width: 300px;padding: 10px;}
? ? ? ?#tab div{border: 1px solid cornflowerblue;padding: 10px 5px;border-top: none;line-height: 30px;}
? ? ? ?#tab ul li.on{border-top:3px solid darkred;border-bottom: 2px solid blue;}
? ? ? ?.hide{display: none;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實現(xiàn)選項卡切換
? window.onload=function(){
? var otab=document.getElementById("tab");
??
? var oul=otab.getElementsByTagName("ul")[0];
? var oli=oul.getElementsByTagName("li");
? var odiv=otab.getElementsByTagName("div");
? for(var i=0;i<oli.length;i++){
? oli[i].index=i;
? oli[i].onclick=function(){
? for(var j=0;j<oli.length;j++){
? oli[j].className="";
? odiv[j].className="hide"
? }
? this.className="on";
? odiv[this.index].className=""
? }
?
? }
? }
??
??
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tab">
<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>
2019-10-12
你li的border，padding，margin先別設(shè)置，然后設(shè)置li的高度等于ul的高度，再設(shè)置border，子元素的超過父容器的部分會覆蓋父容器，自己算其他數(shù)據(jù)如果你不想上邊框也覆蓋，隨便問一下#tab ul li.on不是直接.on就行了嗎類多的話再ul .on = =
2019-10-11
??<style?type="text/css">???? ??/*?CSS樣式制作?*/???? ??*?{?????? ??padding:?0px;?????? ??margin:?0px;???? ??}???? ??ul?{?????? ??/*?background:?gray;?背景不要*/??????? ??list-style:?none;?????? ??overflow:?hidden;?????? ??/*?border-bottom:?2px?solid?darkred;?下邊框給div來寫*/?????? ??height:?40px;???? ??}???? ??#tab?ul?li?{?????? ??display:?inline-block;?????? ??border:?2px?solid?cornflowerblue;?????? ??float:?left;?????? ??line-height:?38px;?????? ??margin:?0px?10px;?????? ??border-bottom:?none;???? ??}???? ??#tab?{?????? ??width:?300px;?????? ??padding:?10px;???? ??}???? ??#tab?div?{???????????? ??border:?1px?solid?cornflowerblue;???????????? ??border-top:?2px?solid?darkred;/*?添加上邊紅色邊框?*/?????? ??padding:?10px?5px;?????? ??/*?border-top:?none;?去掉*/?????? ??line-height:?30px;?????? ??margin-top:?-2px;???? ??}???? ??#tab?ul?li.on?{?????? ??border-top:?2px?solid?darkred;?????? ??/*?border-bottom:?2px?solid?blue;?去掉*/?????? ??position:?relative;??/*定位*/???? ??z-index:?1000;????/*調(diào)整層級*/ ??}???? ??/*?添加偽類白線蓋住?*/???? ??#tab?ul?li.on::before?{?????? ??content:?'';?????? ??position:?absolute;?????? ??height:?2px;?????? ??width:?100%;?????? ??background:?#fff;?????? ??bottom:?0px;?????? ??left:?0;???? ??}???? ??.hide?{?????? ??display:?none;???? ??}?? ??</style>