Tab页用CSS3实现

阿尔萨斯

浏览: 4184045 次

最近访客更多访客>>

snower_tt

iams13

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2014-10 ( 581)
2014-09 ( 572)
2014-08 ( 545)
更多存档...

本文学习自下面的一篇文章，但是做了修改。

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;
}

分享到：