10-1编程挑战问题：css样式上边框问题-慕课网

10-1编程挑战问题：css样式上边框问题

来源：10-1 编程挑战

qq_不能說的秘密_0

2016-01-03 23:25

附上代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</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实现选项卡切换
    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">房产</a>
       <div id="block1">
           <a href="#">275万购昌平邻铁三居</a>
           <a href="#">总价20万买一居</a>
           <a href="#">200万内购五环三居</a>
           <a href="#">140万安家东三环</a>
           <a href="#">北京首现零首付楼盘</a>
           <a href="#">53万购东5环50平</a>
           <a href="#">京楼盘直降5000</a>
           <a href="#">中信府公园楼王现房</a>
       </div>
       </li>
       <li><a href="#" onclick="clk(this)">家居</a>
       <div id="block2">
           <a href="#">40平出租屋大改造</a>
           <a href="#">美少女的混搭小窝</a>
           <a href="#">经典清新简欧爱家</a>
           <a href="#">90平老房焕发新生</a>
           <a href="#">新中式的酷色温情</a>
           <a href="#">66平撞色活泼家居</a>
           <a href="#">瓷砖就像选好老婆</a>
           <a href="#">卫生间烟道的设计</a>
       </div>
       </li>
       <li><a href="#" onclick="clk(this)">二手房</a>
       <div id="block3">
           <a href="#">通州豪华3居260万</a>
           <a href="#">二环稀缺2居250w甩</a>
           <a href="#">西3环通透2居290万</a>
           <a href="#">130万2居限量抢购</a>
           <a href="#">黄城根小学学区仅260万</a>
           <a href="#">121平70万抛!</a>
           <a href="#">独家别墅280万</a>
           <a href="#">苏州桥2居优惠价248万</a>
       </div>
       </li>
   </ul>

</body>
</html>

在bl的class中定义了border-bottom为1px #ccc，但是自动帮我也补了个上边框，就算自己定义了border-top，那个灰色的边框也在，怎么也去不掉，但是一把border-bottom注释掉立刻就上下边框都没有了。。这个是因为什么出现的呢？

附图：

注释前

注释后：

写回答关注

1回答

堂堂堂堂糖糖糖童鞋: 2016-01-04 10:14:03

已采纳

首先你给的CSS代码有问题：我帮你修改如下,

    #u1 li{ float: left;}
    li>a{
           display: block;
           width:70px;
           height:13px;
           /*float: left;*/这里并不是a浮动，而是li浮动，所以注释改行，添加上面的样式
           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{//找了半天没有发现bl在哪，其实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修改，下面说出现问题的原因，

了解一些这句话：

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。(重点)大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

由于为每一个div都设置了：

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

又分别设置了：

#block1{height: 84px;}
#block2{height: 0;}//边框不会隐藏
#block3{height: 0;}//边框不会隐藏

高度为0并不意味着border为就看不见了，所以出现那种情况的原因是border-top:3px solid #0fe; 加上border-bottom:1px solid #ccc; 共 4px的高度，所以底下会有一条 bottom:1px solid #ccc;高度的border，那是由于#block2和#block3的border引起的，因为他们的border宽度和为4px; 所以#block1 border-top宽度3px无法覆盖4px;所以就会出现那样一条边框！

解决方案：

#block1{display:block;}
#block2{display:none;}//边框也会隐藏
#block3{display:none;}//边框也会隐藏

你的代码切换时还有这样的问题！你先尝试解决一下，有问题再问我！

1 0

qq_不能說...

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

2016-01-05 12:54:23

共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468788 学习 · 22582 问题

查看课程

相似问题

10编程挑战边框颜色问题

回答 2

10-1编程挑战

回答 2

回答 2

回答 1

回答 3