標(biāo)題下的線不知道怎么變成透明，求大佬指教
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? ? #tab {
? ? ? ? ? border: none;
? ? ? }
? ? ? #tab h3 {
? ? ? ? ? border: 1px solid #aaa;
? ? ? ? ? border-bottom: none;
? ? ? ? ? margin: 2px 1px 0px 1px;
? ? ? ? ? padding:0px;
? ? ? ? ? font-size:14px;
? ? ? ? ? float:left;//讓<li>元素都在同一行顯示，都靠左
? ? ? ? ? right:50px;//從右邊向左移動(dòng)5px
? ? ? ? ? width：200px;
? ? ? ? ? height:24px;//<li>元素的高度
? ? ? ? ? line-height:24px;//<li>元素的行高
? ? ? ? ? text-align:center;//讓標(biāo)題的字居中
? ? ? }
? ? ? #tab div {
? ? ? ? ? clear:both;//左右兩側(cè)不允許有浮動(dòng)元素
? ? ? ? ? border-bottom:none;
? ? ? ? ? font-size:14px;
? ? ? ? ? padding:20px 0px 0px 20px;
? ? ? ? ? display: none; /*選項(xiàng)卡的效果通過(guò)display:[none block]來(lái)控制顯示與隱藏*/
? ? ? }? ??
? ? ? #tab div.content{
? ? ? ? ? font-size:14px;
? ? ? ? ? border:2px solid blue;
? ? ? ? ? border-top:2px solid saddlebrown;
? ? ? ? ? display:block;
? ? ? }?
? ? ? #tab h3.active{
? ? ? ? ? border-top:2px solid saddlebrown;
? ? ? ? ? border-bottom:2px solid transparent;
? ? ? }
? ? ??
? ? </style>
? ? <script type="text/javascript">
? ? // JS實(shí)現(xiàn)選項(xiàng)卡切換
? ? ? ? window.onload = function() {
? ? ? ? var oTab = document.getElementById("tab");
? ? ? ? var aH3 = oTab.getElementsByTagName("h3");
? ? ? ? var aDiv = oTab.getElementsByTagName("div");
? ? ? ? for (var i = 0; i < aH3.length; i++) {
? ? ? ? ? ? aH3[i].index = i;
? ? ? ? ? ? aH3[i].onclick = function() {
? ? ? ? ? ? ? ? for (var i = 0; i < aH3.length; i++) {
? ? ? ? ? ? ? ? aH3[i].className = "";
? ? ? ? ? ? ? ? aDiv[i].style.display = "none";
? ? ? ? ? ? ? ? aDiv[this.index].className = "";//this指的是用戶點(diǎn)擊的對(duì)象
? ? ? ? ? ? ? ? aDiv[this.index].className = "content";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? aDiv[this.index].style.display = "block";
? ? ? ? ? ? ? ? this.className = "active";
? ? ? ? ? ? };
? ? ? ? }
? ? };
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="tab">
? ??
? ? <h3 class="active">房產(chǎn)</h3>
? ? <h3>家居</h3>
? ? <h3>二手房</h3>
? ?
? ? <div class="content">
? ? ? ? 275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居<br>
? ? ? ? 200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)<br>
? ? ? ? 北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平<br>
? ? ? ? 京樓盤直降5000 中信府 公園樓王現(xiàn)房<br>
? ? </div>
? ? <div>
? ? ? ? 40平出租屋大改造 美少女的混搭小窩<br>
? ? ? ? 經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生<br>
? ? ? ? 新中式的酷色溫情 66平撞色活潑家居<br>
? ? ? ? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)<br>
? ? </div>
? ? <div>
? ? ? ? 通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩<br>
? ? ? ? 西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)<br>
? ? ? ? 黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!<br>
? ? ? ? 獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)<br>
? ? </div>
</div>
</body>
</html>
2018-10-09
你那個(gè)h3的下邊框設(shè)為白色蓋在下面div的上邊框就是“透明”的效果，自己調(diào)整下找到蓋住的像素就行
2018-10-10
這下行了，謝謝您給的改進(jìn)的建議，非常詳細(xì)，感激
2018-10-10
或者你可以選擇這樣：
?border-bottom:4px solid #fff;//?#tab h3.active
?margin: 2px 5px -3px 1px;//#tab h3
?padding:2px 10px 5px 10px;//#tab h3
這樣就基本和示例差不多了，建議你再去回顧一下CSS課程或者看一下其他的CSS課程，你的樣式里邊選擇器都很冗余，比如你的代碼里邊只有標(biāo)題那里用了h3,其他地方都沒有，所以就可以直接寫成h3{},后面的也是，#tab h3{}適用的是很多地方都用了h3，你要為ID為tab下的元素里邊的h3加上獨(dú)立的樣式的話才需要這樣寫。多去回顧一下可以減少很多無(wú)意義的代碼量。
2018-10-09
? ? ? ? ? border-bottom: 2px solid white;
? ? ? ? ? margin: 2px 10px -2px 0px;
比如你可以把你h3的樣式改成這樣，但是要想變成要求的那樣，你的其他代碼還需要調(diào)整