html-tab项

来源：互联网发布：网络贷被全面叫停政策编辑：程序博客网时间：2024/06/08 04:33

效果图

html部分

  <div  class="page-tab">      <aclass="highlight"href="#">全部楼盘</a>      <aclass="normal"href="#">VR楼盘</a>      <aclass="normal"href="#">优惠楼盘</a>      <aclass="normal"href="#">看房团</a>  </div>

css部分

  .page-tab{    border:1px solid#dddddd;    height:38px;    background-color:#F9F9F9;    position:relative;  }  .highlight,.normal:hover{    float:left;    margin-left: -1px;    margin-top: -1px;    background-color:#FFFFFF;    color:#60AB00;    border-left:1px solid#DDDDDD;    border-right:1px solid#DDDDDD;    border-top:2px solid#60AB00;    width:104px;    height:38px;    text-align:center;    line-height:38px;    font-size:16px;    z-index:2;  }  .highlight:hover{    color:#60AB00;  }.normal{    float:left;    position:relative;    margin-left: -1px;    margin-top: -1px;    width:104px;    height:38px;    text-align:center;    line-height:38px;    font-size:16px;    z-index:2;}

阅读全文

0 0