|
本文学习自下面的一篇文章，但是做了修改。
将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;
- }
原文链接：http://blog.csdn.net/sheismylife/article/details/7277565
| 
/1 
|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛
( 豫ICP备2022021143号-1 )
发表于 2013-4-12 16:06:55
置顶卡
变色卡
千斤顶