標題下的線不知道怎么變成透明，求大佬指教
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</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;//從右邊向左移動5px
? ? ? ? ? width：200px;
? ? ? ? ? height:24px;//<li>元素的高度
? ? ? ? ? line-height:24px;//<li>元素的行高
? ? ? ? ? text-align:center;//讓標題的字居中
? ? ? }
? ? ? #tab div {
? ? ? ? ? clear:both;//左右兩側(cè)不允許有浮動元素
? ? ? ? ? border-bottom:none;
? ? ? ? ? font-size:14px;
? ? ? ? ? padding:20px 0px 0px 20px;
? ? ? ? ? display: none; /*選項卡的效果通過display:[none block]來控制顯示與隱藏*/
? ? ? }? ??
? ? ? #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實現(xiàn)選項卡切換
? ? ? ? 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指的是用戶點擊的對象
? ? ? ? ? ? ? ? aDiv[this.index].className = "content";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? aDiv[this.index].style.display = "block";
? ? ? ? ? ? ? ? this.className = "active";
? ? ? ? ? ? };
? ? ? ? }
? ? };
? ??
? ? </script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div id="tab">
? ??
? ? <h3 class="active">房產(chǎn)</h3>
? ? <h3>家居</h3>
? ? <h3>二手房</h3>
? ?
? ? <div class="content">
? ? ? ? 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>
? ? ? ? 40平出租屋大改造 美少女的混搭小窩<br>
? ? ? ? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>
? ? ? ? 新中式的酷色溫情 66平撞色活潑家居<br>
? ? ? ? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計<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>
2018-10-09
你那個h3的下邊框設(shè)為白色蓋在下面div的上邊框就是“透明”的效果，自己調(diào)整下找到蓋住的像素就行
2018-10-10
這下行了，謝謝您給的改進的建議，非常詳細，感激
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課程，你的樣式里邊選擇器都很冗余，比如你的代碼里邊只有標題那里用了h3,其他地方都沒有，所以就可以直接寫成h3{},后面的也是，#tab h3{}適用的是很多地方都用了h3，你要為ID為tab下的元素里邊的h3加上獨立的樣式的話才需要這樣寫。多去回顧一下可以減少很多無意義的代碼量。
2018-10-09
? ? ? ? ? border-bottom: 2px solid white;
? ? ? ? ? margin: 2px 10px -2px 0px;
比如你可以把你h3的樣式改成這樣，但是要想變成要求的那樣，你的其他代碼還需要調(diào)整