<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>选项卡</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋体", SimSun, serif;
background:#fff;
color:#000;
}
ul,
li,
dl,
dt,
dd {
margin:0;
padding:0; /* 清除浏览器默认的margin和padding值 */
}
ul,
li {
list-style:none outside; /* 清除浏览器中列表项默认的占位 */
}
a {
text-decoration:none;
}
img {
border:0;
}
/* 选项卡整体外观定义 */
.tabList {
width:400px;
height:160px;
overflow:hidden;
}
.tabList .tabBox {
height:100%;
position:relative;
background:#09c;
}
.tabList .tabBox li {
float:left;
width:25%;
text-align:center;
}
.tabList h4 {
margin:0;
height:26px;
font-size:1em;
line-height:22px;
}
.tabList h4 a {
color:#039;
font-weight:normal;
display:block;
background:#bfeafd url(img/tabList_btn.png) no-repeat;
padding-left:5px;
}
.tabList h4 a span {
display:block;
background:url(img/tabList_btn.png) no-repeat top right;
padding-right:5px;
}
.tabList h4 a:hover,
.tabList .tabOn h4 a{
background-position:0 -50px;
}
.tabList h4 a:hover span,
.tabList .tabOn h4 a span {
background-position:right -50px;
}
.tabList .tabContentBox li{
width:auto;
margin-top:0;
}
.tabList .tabContentBox {
width:390px;
height:130px;
border:1px solid #069;
text-align:left;
overflow:hidden;
background:#fff;
position:absolute;
top:22px;
left:0;
display:none;
margin:4px;
}
.tabList li:hover .tabContentBox,
.tabList .tabOn .tabContentBox {
display:block;
}
/* 以下是对各项内容的CSS定义 */
.tabList .tabContentBox .blog,
.tabList .tabContentBox .group {
color:#999;
line-height:2em;
margin:5px;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt,
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd{
float:left;
border-bottom: 1px dotted #9cf;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt {
width:60%;
white-space:nowrap;
overflow:hidden;
clear:left;
font-size:1.1em;
}
.tabList .tabContentBox .blog dt a,
.tabList .tabContentBox .group dt a {
color:#039;
display:block;
margin-left:5px;
padding-left:12px;
background: url(img/tabList_icon1.png) no-repeat 5px 11px;
}
.tabList .tabContentBox .blog dt a:hover,
.tabList .tabContentBox .group dt a:hover {
color:#f90;
background-position:5px -19px;
}
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd {
color:#0cf;
width:20%;
float:left;
white-space:nowrap;
overflow:hidden;
}
.tabList .tabContentBox .blog dd a,
.tabList .tabContentBox .group dd a {
color:#069;
}
.tabList .tabContentBox .blog dd a:hover,
.tabList .tabContentBox .group dd a:hover {
color:#f90;
}
.tabList .tabContentBox .album li,
.tabList .tabContentBox .share li{
width:24.9%;
float:left;
padding-top:15px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>选项卡</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋体", SimSun, serif;
background:#fff;
color:#000;
}
ul,
li,
dl,
dt,
dd {
margin:0;
padding:0; /* 清除浏览器默认的margin和padding值 */
}
ul,
li {
list-style:none outside; /* 清除浏览器中列表项默认的占位 */
}
a {
text-decoration:none;
}
img {
border:0;
}
/* 选项卡整体外观定义 */
.tabList {
width:400px;
height:160px;
overflow:hidden;
}
.tabList .tabBox {
height:100%;
position:relative;
background:#09c;
}
.tabList .tabBox li {
float:left;
width:25%;
text-align:center;
}
.tabList h4 {
margin:0;
height:26px;
font-size:1em;
line-height:22px;
}
.tabList h4 a {
color:#039;
font-weight:normal;
display:block;
background:#bfeafd url(img/tabList_btn.png) no-repeat;
padding-left:5px;
}
.tabList h4 a span {
display:block;
background:url(img/tabList_btn.png) no-repeat top right;
padding-right:5px;
}
.tabList h4 a:hover,
.tabList .tabOn h4 a{
background-position:0 -50px;
}
.tabList h4 a:hover span,
.tabList .tabOn h4 a span {
background-position:right -50px;
}
.tabList .tabContentBox li{
width:auto;
margin-top:0;
}
.tabList .tabContentBox {
width:390px;
height:130px;
border:1px solid #069;
text-align:left;
overflow:hidden;
background:#fff;
position:absolute;
top:22px;
left:0;
display:none;
margin:4px;
}
.tabList li:hover .tabContentBox,
.tabList .tabOn .tabContentBox {
display:block;
}
/* 以下是对各项内容的CSS定义 */
.tabList .tabContentBox .blog,
.tabList .tabContentBox .group {
color:#999;
line-height:2em;
margin:5px;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt,
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd{
float:left;
border-bottom: 1px dotted #9cf;
}
.tabList .tabContentBox .blog dt,
.tabList .tabContentBox .group dt {
width:60%;
white-space:nowrap;
overflow:hidden;
clear:left;
font-size:1.1em;
}
.tabList .tabContentBox .blog dt a,
.tabList .tabContentBox .group dt a {
color:#039;
display:block;
margin-left:5px;
padding-left:12px;
background: url(img/tabList_icon1.png) no-repeat 5px 11px;
}
.tabList .tabContentBox .blog dt a:hover,
.tabList .tabContentBox .group dt a:hover {
color:#f90;
background-position:5px -19px;
}
.tabList .tabContentBox .blog dd,
.tabList .tabContentBox .group dd {
color:#0cf;
width:20%;
float:left;
white-space:nowrap;
overflow:hidden;
}
.tabList .tabContentBox .blog dd a,
.tabList .tabContentBox .group dd a {
color:#069;
}
.tabList .tabContentBox .blog dd a:hover,
.tabList .tabContentBox .group dd a:hover {
color:#f90;
}
.tabList .tabContentBox .album li,
.tabList .tabContentBox .share li{
width:24.9%;
float:left;
padding-top:15px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript">