Tab页用CSS3实现
将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>
- .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;
- }
相关推荐
impress 2020-08-26
IT之家 2020-03-11
graseed 2020-10-28
zbkyumlei 2020-10-12
SXIAOYI 2020-09-16
jinhao 2020-09-07
liuqipao 2020-07-07
淡风wisdon大大 2020-06-06
yoohsummer 2020-06-01
chenjia00 2020-05-29
baike 2020-05-19
扭来不叫牛奶 2020-05-08
hxmilyy 2020-05-11
黎豆子 2020-05-07
xiongweiwei00 2020-04-29
Cypress 2020-04-25
冰蝶 2020-04-20