本文学习自下面的一篇文章,但是做了修改。
http://www.shejidaren.com/examples/css3-target/css3-target.html
将Tab按钮变成了两个,并且移动到了上方。为了移动到上方,增加了一个<div id=tabbody>包含了两个tab内容,两个tab内容采用绝对定位,而tabbody采用了相对定位,这样刚好位于和两个tab按钮之下。
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 tab</title>
<link rel="stylesheet" href="tab.css" type="text/css" />
</head>
<body>
<div class="tablist">
<ul class="tabmenu">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
</ul>
<div id="tabbody" class="tab_body">
<div id="tab1" class="tab_content">tab1 content</div>
<div id="tab2" class="tab_content">tab2 content</div>
</div>
</div>
</body>
</html>
css代码如下:
.tablist {
position:relative;
margin:50px auto;
min-height:200px;
}
.tab_body {
position:relative;
top:30px;
width:600px;
height:200px;
}
/* this example style begin */
.tab_content {
position: absolute;/*set content box as absolute*/
/* content style begin*/
width:600px;
height:170px;
padding:15px;
border:1px solid #91a7b4;
border-radius:3px;
box-shadow:0 2px 3px rgba(0,0,0,0.1);
font-size:1.2em;
line-height:1.5em;
color:#666;
background:#fff;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
}
/* tabmenu style */
.tabmenu {
position:absolute;
/*top:100%;*/
margin:0;
}
.tabmenu li{
display:inline-block;
}
.tabmenu li a {
display:block;
padding:5px 10px;
margin:0 10px 0 0;
border:1px solid #91a7b4;
border-radius:0 0 5px 5px;
background:#e3f1f8;
color:#333;
text-decoration:none;
}