为了账号安全,请及时绑定邮箱和手机立即绑定

这里的选项卡下边界的白色怎么覆盖内容DIV上边界的颜色呢?

求教,我做出来的选项卡#fff颜色无法覆盖DIV的上边界。


<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf_8"/>

    <title>实践题 - 选项卡</title>

    <style type="text/css">

     /* CSS样式制作 */  

    

       #choices li{

           font-size:14px;

           display:inline-block;

           border: solid 0.5px ;

           border-color:#ccc;

           width:55px;

           height:30px;

           text-align:center;

           line-height:30px;

           padding-right:8px;

           padding-left:8px;

           margin-bottom:0px;

           border-bottom: #fff solid 0.5px;

           

            

       }

     #choices{

           margin-bottom:0;

     }

   

       #div1{

          

           border:solid #ccc 0.5px;

           width:300px;

           height:150px;

           margin-top:;

           position:relative;

           left:35px;

           border-top:saddlebrown solid 0.5px;

       }

    </style>

    <script type="text/javascript">

         

    // JS实现选项卡切换

    var content = document.getElementsByTagName("div");

    var choices = document.getElementById("choices").childNodes;

    window.onload= function(){

        

        

        

    }

    function getChoice(obj){

           // alert(content[0].innerHTML);

        switch(obj.innerHTML){

            case "房产" :

                content[0].innerHTML=

                "275万购昌平邻铁三居 总价20万买一居<br /> 200万内购五环三居 140万安家东三环<br/> 北京首现零首付楼盘 53万购东5环50平<br /> 京楼盘直降5000 中信府 公园楼王现房";

                break;

            case "家居":

                content[0].innerHTML=

                "40平出租屋大改造 美少女的混搭小窝<br/>经典清新简欧爱家 90平老房焕发新生<br />新中式的酷色温情 66平撞色活泼家居<br />瓷砖就像选好老婆 卫生间烟道的设计";

                break;

            case "二手房":

                content[0].innerHTML=

                "     通州豪华3居260万 二环稀缺2居250w甩<br />西3环通透2居290万 130万2居限量抢购<br />黄城根小学学区仅260万 121平70万抛!<br /独家别墅280万 苏州桥2居优惠价248万";

                break;

                default:  alert("Can not get object!");

   

        }

    }

    

    </script>

 

</head>

<body>

<!-- HTML页面布局 -->


<ul id="choices">

    <li onmouseover="getChoice(this)">房产</li>

    <li onmouseover="getChoice(this)">家居</li>

    <li onmouseover="getChoice(this)">二手房</li>

</ul>


  <div id="div1" >

      

  </div>

  <!--<input type="button" value="test" onclick="javascript:alert(content);">-->


</body>

</html>


正在回答

3 回答

不过你的代码,我试了,div用了相对定位,怎么改ul的width都对不上。

0 回复 有任何疑惑可以回复我~

因为老师源代码里,div是没有border-top的,ul的border-bottom才是我们看到的那条红线,li的优先级比ul高,所以就可以遮挡住ul的border-bottom了

0 回复 有任何疑惑可以回复我~

上代码

0 回复 有任何疑惑可以回复我~
#1

Justeasy 提问者

麻烦大神看看,主要是#fff无法覆盖的问题,望解答
2018-02-01 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

这里的选项卡下边界的白色怎么覆盖内容DIV上边界的颜色呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信