特别样式的选项卡

       <ul class="Switch">
<li class="Switch_one active">企业采购商城</li>
<li class="Switch_two ">我的订单</li>
</ul>

在选中的那个下面是没有线的，有很多插件样式可以实现这个效果，但是我们手动该怎么写呢？

首先我想到的是设置这个li块的border-bottom:none;但是这个底部的线是在外面的那个ul设置的就算你再设置li他也不可能使ul的底线隐藏啊。

所以我们可以设置选总的那个li的高度比外层的ul高度高，然后给个背景色白色就覆盖住了原来的底线啦。

.Switch{
 /*设置了宽高，以便在下面设置更高的高覆盖住这个高*/
        width: 1080px; 
        height: 46px;
        overflow:hidden;
border-bottom:1px solid #333;
}
.Switch .active{

border-top:3px solid red;

height: 46px;     //加起来实际的高是49了

position:relative;

top:0;color:red;

background-color:#fff;

}      
.Switch p{

padding-top:2px;

float:left;

 width: 130px; 

height: 43px;

line-height: 45px;

border-left:1px solid #333;  // p都有左边框和上边框，但是只要第二个有右边框

border-top:1px solid #333;

text-align: center;

}
.Switch .Switch_two{

border-right:1px solid #333;

}