                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

10-1編程挑戰(zhàn)問(wèn)題：css樣式上邊框問(wèn)題

附上代碼：

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */ ?
? ??? ?*{margin:0; list-style: none;padding: 0; text-decoration: none; color:#000; font-size: 14px; border:0;}?? ?
??? #u1 {
?? ??? ?margin-top: 10px;
?? ??? ?position: relative;
??? }
? ??? ?li>a{
? ??? ??? ?display: block;
? ??? ??? ?width:70px;
? ??? ??? ?height:13px;
? ??? ??? ?float: left;
? ??? ??? ?line-height: 13px;
? ??? ??? ?text-align: center;
? ??? ??? ?margin-left: 10px;
? ??? ??? ?border-top:1px solid #ccc;
? ??? ??? ?border-left:1px solid #ccc;
? ??? ??? ?border-right:1px solid #ccc;
? ??? ??? ?padding: 10px 10px;
? ??? ??? ?background-color: #fff;
? ??? ?}

? ??? ?#a1{
? ??? ??? ?line-height: 15px;
? ??? ??? ?height: 15px;
? ??? ??? ?border-top: 3px solid #0fe;
? ??? ?}
??? .bl{
?? ??? ?position: absolute;
?? ??? ?left:0;
?? ??? ?top:34px;
?? ??? ?margin-left: 5px;
?? ??? ?width: 350px;
?? ??? ?line-height: 20px;
?? ??? ?border-top: 3px solid #0fe;
?? ??? ?border-left: 1px solid #ccc;
?? ??? ?border-right: 1px solid #ccc;
?? ??? ?border-bottom: 1px solid #ccc;
?? ??? ?overflow: hidden;
?? ??? ?z-index: -9999;
??? }
??? #u1 div a{
?? ??? ?display: inline-block;
?? ??? ?margin-left: 10px;
??? }

??? #block1{height: 84px;}
??? #block2{height: 0;}
??? #block3{height: 0;}

??? </style>
??? <script type="text/javascript">
??????? ?
??? // JS實(shí)現(xiàn)選項(xiàng)卡切換
??? function clk(obj){
?? ??? ?var pnode=obj.parentNode.parentNode;
?? ??? ?var list=pnode.getElementsByTagName("li");
?? ??? ?for(var i=0; i<list.length; i++){
?? ??? ??? ?var aA = list[i].getElementsByTagName("a")[0];
?? ??? ??? ?if(aA === obj){
?? ??? ??? ??? ?aA.style.borderTop="3px solid #0fe";
?? ??? ??? ??? ?aA.style.height="15px";
?? ??? ??? ??? ?aA.style.lineHeight="15px";
?? ??? ??? ??? ?var sib=aA.nextSibling;
?? ??? ??? ??? ?while(sib.nodeType!=1){
?? ??? ??? ??? ??? ?sib=sib.nextSibling;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?sib.style.height="84px";
?? ??? ??? ?}else{
?? ??? ??? ??? ?aA.style.borderTop="1px solid #ccc";
?? ??? ??? ??? ?aA.style.height="13px";
?? ??? ??? ??? ?aA.style.lineHeight="13px";
?? ??? ??? ??? ?var sib=aA.nextSibling;
?? ??? ??? ??? ?while(sib.nodeType!=1){
?? ??? ??? ??? ??? ?sib=sib.nextSibling;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?sib.style.height="0";
?? ??? ??? ?}
?? ??? ?}
??? }
?? ?
??? </script>
? ??? ?
?
</head>
<body>

?? ?<ul id="u1">
?? ??? ?<li><a href="#" onclick="clk(this)" id="a1">房產(chǎn)</a>
?? ??? ?<div id="block1">
?? ??? ??? ?<a href="#">275萬(wàn)購(gòu)昌平鄰鐵三居</a>
?? ??? ??? ?<a href="#">總價(jià)20萬(wàn)買(mǎi)一居</a>
?? ??? ??? ?<a href="#">200萬(wàn)內(nèi)購(gòu)五環(huán)三居</a>
?? ??? ??? ?<a href="#">140萬(wàn)安家東三環(huán)</a>
?? ??? ??? ?<a href="#">北京首現(xiàn)零首付樓盤(pán)</a>
?? ??? ??? ?<a href="#">53萬(wàn)購(gòu)東5環(huán)50平</a>
?? ??? ??? ?<a href="#">京樓盤(pán)直降5000</a>
?? ??? ??? ?<a href="#">中信府公園樓王現(xiàn)房</a>
?? ??? ?</div>
?? ??? ?</li>
?? ??? ?<li><a href="#" onclick="clk(this)">家居</a>
?? ??? ?<div id="block2">
?? ??? ??? ?<a href="#">40平出租屋大改造</a>
?? ??? ??? ?<a href="#">美少女的混搭小窩</a>
?? ??? ??? ?<a href="#">經(jīng)典清新簡(jiǎn)歐愛(ài)家</a>
?? ??? ??? ?<a href="#">90平老房煥發(fā)新生</a>
?? ??? ??? ?<a href="#">新中式的酷色溫情</a>
?? ??? ??? ?<a href="#">66平撞色活潑家居</a>
?? ??? ??? ?<a href="#">瓷磚就像選好老婆</a>
?? ??? ??? ?<a href="#">衛(wèi)生間煙道的設(shè)計(jì)</a>
?? ??? ?</div>
?? ??? ?</li>
?? ??? ?<li><a href="#" onclick="clk(this)">二手房</a>
?? ??? ?<div id="block3">
?? ??? ??? ?<a href="#">通州豪華3居260萬(wàn)</a>
?? ??? ??? ?<a href="#">二環(huán)稀缺2居250w甩</a>
?? ??? ??? ?<a href="#">西3環(huán)通透2居290萬(wàn)</a>
?? ??? ??? ?<a href="#">130萬(wàn)2居限量搶購(gòu)</a>
?? ??? ??? ?<a href="#">黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)</a>
?? ??? ??? ?<a href="#">121平70萬(wàn)拋!</a>
?? ??? ??? ?<a href="#">獨(dú)家別墅280萬(wàn)</a>
?? ??? ??? ?<a href="#">蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</a>
?? ??? ?</div>
?? ??? ?</li>
?? ?</ul>

?
</body>
</html>

在bl的class中定義了border-bottom為1px #ccc，但是自動(dòng)幫我也補(bǔ)了個(gè)上邊框，就算自己定義了border-top，那個(gè)灰色的邊框也在，怎么也去不掉，但是一把border-bottom注釋掉立刻就上下邊框都沒(méi)有了。。這個(gè)是因?yàn)槭裁闯霈F(xiàn)的呢？

附圖：

注釋前

注釋后：

qq_不能說(shuō)的秘密_0

2016-01-03

源自：JavaScript進(jìn)階篇 10-1

關(guān)注問(wèn)題我要回答

477

操作

收起

1 回答

堂堂堂堂糖糖糖童鞋回答被采納 +3 積分
2016-01-04

首先你給的CSS代碼有問(wèn)題：我?guī)湍阈薷娜缦?

????#u1?li{?float:?left;}
????li>a{
???????????display:?block;
???????????width:70px;
???????????height:13px;
???????????/*float:?left;*/這里并不是a浮動(dòng)，而是li浮動(dòng)，所以注釋改行，添加上面的樣式
???????????line-height:?13px;
???????????text-align:?center;
???????????margin-left:?10px;
???????????border-top:1px?solid?#ccc;
???????????border-left:1px?solid?#ccc;
???????????border-right:1px?solid?#ccc;
???????????padding:?10px?10px;
???????????background-color:?#fff;
????}
?????.bl{//找了半天沒(méi)有發(fā)現(xiàn)bl在哪，其實(shí)b1指定就是div，所以把.b1替換為div
????????position:?absolute;
????????left:0;
????????top:34px;
????????margin-left:?5px;
????????width:?350px;
????????line-height:?20px;
????????border-top:?3px?solid?#0fe;
????????border-left:?1px?solid?#ccc;
????????border-right:?1px?solid?#ccc;
????????border-bottom:?1px?solid?#ccc;
????????overflow:?hidden;
????????z-index:?-9999;
????}

上面是基本的CSS修改，下面說(shuō)出現(xiàn)問(wèn)題的原因，

了解一些這句話(huà)：

CSS 規(guī)范指出，邊框繪制在“元素的背景之上”。這很重要，因?yàn)橛行┻吙蚴恰伴g斷的”（例如，點(diǎn)線(xiàn)邊框或虛線(xiàn)框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見(jiàn)部分之間。

CSS2 指出背景只延伸到內(nèi)邊距，而不是邊框。后來(lái) CSS2.1 進(jìn)行了更正：元素的背景是內(nèi)容、內(nèi)邊距和邊框區(qū)的背景。(重點(diǎn))大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過(guò)一些較老的瀏覽器可能會(huì)有不同的表現(xiàn)。

由于為每一個(gè)div都設(shè)置了：

border-top:?3px?solid?#0fe;
border-left:?1px?solid?#ccc;
border-right:?1px?solid?#ccc;
border-bottom:?1px?solid?#ccc;

又分別設(shè)置了：

#block1{height:?84px;}
#block2{height:?0;}//邊框不會(huì)隱藏
#block3{height:?0;}//邊框不會(huì)隱藏

高度為0并不意味著border為就看不見(jiàn)了，所以出現(xiàn)那種情況的原因是border-top:3px solid #0fe; 加上border-bottom:1px solid #ccc;? 共 4px的高度，所以底下會(huì)有一條 bottom:1px solid #ccc;高度的border，那是由于#block2和#block3的border引起的，因?yàn)樗麄兊腷order寬度和為4px; 所以#block1 border-top寬度3px無(wú)法覆蓋4px;所以就會(huì)出現(xiàn)那樣一條邊框！

解決方案：

#block1{display:block;}
#block2{display:none;}//邊框也會(huì)隱藏
#block3{display:none;}//邊框也會(huì)隱藏

你的代碼切換時(shí)還有這樣的問(wèn)題！你先嘗試解決一下，有問(wèn)題再問(wèn)我！

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

qq_不能說(shuō)的秘密_0 提問(wèn)者

非常感謝！感謝手打，通俗易懂~~

2016-01-05 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

JavaScript進(jìn)階篇

參與學(xué)習(xí) 468794 人
解答問(wèn)題 22582 個(gè)

本課程從如何插入JS代碼開(kāi)始，帶您進(jìn)入網(wǎng)頁(yè)動(dòng)態(tài)交互世界

進(jìn)入課程

本課相似問(wèn)答

2 回答10編程挑戰(zhàn)邊框顏色問(wèn)題

2 回答10-1編程挑戰(zhàn)

2 回答編程挑戰(zhàn)代碼問(wèn)題求解！

1 回答關(guān)于第10章編程挑戰(zhàn)參考代碼中的問(wèn)題

2 回答編程挑戰(zhàn)：tab切換

搜索更多本課相關(guān)問(wèn)答

10-1編程挑戰(zhàn)問(wèn)題：css樣式上邊框問(wèn)題

我要回答關(guān)注問(wèn)題

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

10-1編程挑戰(zhàn)問(wèn)題：css樣式上邊框問(wèn)題

1 回答

本課相似問(wèn)答

10-1編程挑戰(zhàn)問(wèn)題：css樣式上邊框問(wèn)題