歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

Tab頁用CSS3實現

將Tab按鈕變成了兩個，並且移動到了上方。為了移動到上方，增加了一個<div id=tabbody>包含了兩個tab內容，兩個tab內容采用絕對定位，而tabbody采用了相對定位，這樣剛好位於和兩個tab按鈕之下。

html代碼如下：

[html]

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>HTML5 tab</title>  
  6.     <link rel="stylesheet" href="tab.css" type="text/css" />  
  7.   </head>  
  8.   <body>  
  9.     <div class="tablist">  
  10.       <ul class="tabmenu">  
  11.     <li><a href="#tab1">標簽一</a></li>  
  12.     <li><a href="#tab2">標簽二</a></li>  
  13.       </ul>  
  14.       <div id="tabbody" class="tab_body">  
  15.     <div id="tab1" class="tab_content">tab1 content</div>  
  16.     <div id="tab2" class="tab_content">tab2 content</div>  
  17.       </div>  
  18.     </div>   
  19.   </body>  
  20. </html>  
css代碼如下：

[css]

  1. .tablist {  
  2.     position:relative;  
  3.     margin:50px auto;  
  4.     min-height:200px;  
  5. }  
  6.   
  7. .tab_body {  
  8.     position:relative;  
  9.     top:30px;  
  10.     width:600px;  
  11.     height:200px;  
  12. }  
  13.   
  14. /* this example style begin */  
  15. .tab_content {  
  16.     position: absolute;/*set content box as absolute*/  
  17.     /* content style begin*/  
  18.     width:600px;  
  19.     height:170px;  
  20.     padding:15px;  
  21.     border:1px solid #91a7b4;  
  22.     border-radius:3px;  
  23.     box-shadow:0 2px 3px rgba(0,0,0,0.1);  
  24.     font-size:1.2em;  
  25.     line-height:1.5em;  
  26.     color:#666;  
  27.     background:#fff;  
  28. }  
  29.   
  30.   
  31. #tab1:target, #tab2:target, #tab3:target {  
  32.     z-index: 1;  
  33. }  
  34.   
  35.   
  36. /* tabmenu style */  
  37. .tabmenu {  
  38.     position:absolute;  
  39.     /*top:100%;*/  
  40.     margin:0;  
  41. }  
  42.   
  43. .tabmenu li{  
  44.     display:inline-block;  
  45. }  
  46.   
  47. .tabmenu li a {  
  48.     display:block;  
  49.     padding:5px 10px;  
  50.     margin:0 10px 0 0;  
  51.     border:1px solid #91a7b4;  
  52.     border-radius:0 0 5px 5px;  
  53.     background:#e3f1f8;  
  54.     color:#333;  
  55.     text-decoration:none;  
  56. }  

Linux編程

SOL10SETUP

Android--通過ActivityGroup實現Tab的選卡效果

Android TAb分頁菜單實現總結

HTML5 WebStorage

ActivityGroup + GridView 實現Tab分頁標簽

Android開發教程：底部Tab的兩種實現方式

Android UI進階之用gallery實現可滑動的Tab

STM32F429

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved