tabcss.css

原创的CSS+DIV纯静态网页模板

/* 选项卡关键属性 */
#tab {
width:478px;
height:260px;
position:relative;
}

/*设置容器高宽等*/
html > body #tab {
width:500px;
}

/*兼容IE6:IE6下宽度不够*/
#tab div {
	position:absolute;
	left:1px;
	width:495px;
	height:228px;
	border:solid #eee;
	border-width:0 1px 1px;
	top: 26px;
	background-color: #FFFFFF;
}

/*设置容器高宽等*/
#tab div {
display:none;
}

/*设置容器默认隐藏:不用ID是因为下面将利用class来控制容器显示,而class优先级低于id选择器*/
#tab .block {
display:block;
}

/*选中的容器*/
#tab h3 {
float:left;
width:114px;
height:26px;
line-height:26px;
margin:0 -1px 0 0;
font-size:14px;
cursor:pointer;
font-weight:400;
text-align:center;
color:#00007F;
background:#eee url(images/tab.gif) no-repeat;
}

/*默认标题样式*/
#tab .up {
background:#fff url(images/tab1.gif) no-repeat;
}

/*选中的标题样式*/
/*修饰列表内容*/
#tab ul {
margin:15px 0 0;
list-style:none;
padding:0;
}

#tab li {
float:left;
width:50%;
background:url(images/a20061212105235.gif) no-repeat 25px 10px;
}

#tab li a {
display:block;
width:84%;
height:25px;
line-height:25px;
margin-left:8%;
font-size:12px;
text-decoration:none;
color:#333;
background:url(images/g20061212105238.gif) repeat-x left bottom;
text-indent:10px;
}

#tab li a:hover {
text-decoration:underline;
color:red;
}