开发学院网页设计JavaScript CSS+JavaScript 实现TabPane页签 阅读

CSS+JavaScript 实现TabPane页签

 2010-09-14 13:37:10 来源:WEB开发网   
核心提示: tabPane.cssdiv{width:100%;height:auto;}.tab{font-family:Verdana,Helvetica,Arial;font-size:12px;position:relative;width:100%;}.tab-border{border:1

tabPane.css

div{
  width:  100%;
  height:  auto;
}
.tab{
  font-family:  Verdana,Helvetica,Arial;
  font-size:    12px;
  position:  relative;
  width:    100%;
}
.tab-border{border:1pxsolid;border-color:  rgb(120,172,255);}
.tab-head{
  background-color:rgb(234,242,255);;
  border:0px;
  height:23px;
  line-height:20px;
  position:relative;  
}
.tab-headul{
  border:0px;
  height:23px;
  list-style:none;   
  margin:0px;   
  text-align:center;
  padding:0;
  position:absolute;
}
.tab-headli{  
  border:  1pxsolid;
  border-color:  rgb(120,172,255);
  border-left:  0;
  border-bottom:  0;
  border-top:    0;
  cursor:pointer;
  color:#416AA3;  
  float:left;
  display:block;
  height:22px;!important;height:20px;
  line-height:20px;
  padding:    2px6px0px6px;
  margin-top:  2px;
  margin-right:  -1px;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
.tab-headli.hover{
  border:      1pxsolidrgb(120,172,255);
  border-bottom:  0;
  padding:    0px6px3px6px;
  margin:      0px1px0px0px;
  background:    white;
  font-size:      13px;
  font-weight:  bold;
  color:        rgb(0,66,174);
  overflow:visible;  
}

上一页  1 2 3 4  下一页

Tags:CSS JavaScript 实现

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接