tabs.css

一个外国人的AJAX的标签控件

body {
      background:#f2f4ee;
      margin:0;
      padding:0;
      color:#000;
      font:x-small/1.5em Georgia,Serif;
      voice-family: "\"}\""; voice-family:inherit;
      font-size:small;
} 

html>body {font-size:small;}
    
.tabs {
      float:left;
      width:100%;
      background:#DAE0D2 url("../i/bg.gif") repeat-x bottom;
      font-size:93%;
      line-height:normal;
}

.tabs ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
}

.tabList li {
      float:left;
      background:url("../i/left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      list-style:none;
}

.tabList span {
      float:left;
      display:block;
      background:url("../i/right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
}

.tabs > ul a {
      width:auto;
}

 /* Commented Backslash Hack hides rule from IE5-Mac \*/
 .tabList a {float:none;}
 /* End IE5-Mac hack */
 .tabList a:hover {
   color:#333;
 }

.tabList {
      background-position:0 -150px;
      border-width:0;
}

.tabList a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#333;
      }

.tabList {
      background: transparent;
}

.tabList li span {
  display: inline;
  float: left;
}

.tabHandle {
  display: inline;
}

.tabList li span img {
  position: relative;
  left: 2px;
  top: 2px;
}


.tabList li:hover a, .tabList li:hover {
      background-position:0% -150px;
      color:#333;
}

.tabList a:hover, .tabList span:hover  {
      background-position:100% -150px;
      cursor: pointer;
}


.tabList li.selected {
      background-position:0% -150px;
      color:#333;
}

.tabList li.selected span {
      background-position: 100% -150px;
}

.tabPanels {
  background-color: #f8f7f5;
  border-bottom:1px solid #765;
  border-left:1px solid #765;
  border-right:1px solid #765;
  height: 100%;
  padding: 5px;
}



.tabContainer {
  height: 400px;
  text-align: left;
  width: 600px;
}