zoukankan      html  css  js  c++  java

  • 漂亮css选项卡效果大全 [转]

    ruby on rails框架集成了大量的web2.0效果，结合现在网站大量使用选项卡效果，我们也得让我们的ror项目结合潮流，下面有多个实例供大家参考使用：
    1：仿126邮箱选项卡 鼠标点击

    Html代码 复制代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
    5. <title>简洁Tab</title>  
    6. <style type="text/css">  
    7. <!--   
    8. body,div,ul,li{   
    9.  padding:0;   
    10.  text-align:center;   
    11. }   
    12. body{   
    13.  font:12px "宋体";   
    14.  text-align:center;   
    15. }   
    16. a:link{   
    17.  color:#00F;   
    18.  text-decoration:none;   
    19. }   
    20. a:visited {   
    21.  color: #00F;   
    22.  text-decoration:none;   
    23. }   
    24. a:hover {   
    25.  color: #c00;   
    26.  text-decoration:underline;   
    27. }   
    28. ul{ list-style:none;}   
    29. /*选项卡1*/   
    30. #Tab1{   
    31. 460px;   
    32. margin:0px;   
    33. padding:0px;   
    34. margin:0 auto;}   
    35. /*选项卡2*/   
    36. #Tab2{   
    37. 576px;   
    38. margin:0px;   
    39. padding:0px;   
    40. margin:0 auto;}   
    41. /*菜单class*/   
    42. .Menubox {   
    43. 100%;   
    44. background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);   
    45. height:28px;   
    46. line-height:28px;   
    47. }   
    48. .Menubox ul{   
    49. margin:0px;   
    50. padding:0px;   
    51. }   
    52. .Menubox li{   
    53.  float:left;   
    54.  display:block;   
    55.  cursor:pointer;   
    56.  114px;   
    57.  text-align:center;   
    58.  color:#949694;   
    59.  font-weight:bold;   
    60.  }   
    61. .Menubox li.hover{   
    62.  padding:0px;   
    63.  background:#fff;   
    64.  116px;   
    65.  border-left:1px solid #A8C29F;   
    66.  border-top:1px solid #A8C29F;   
    67.  border-right:1px solid #A8C29F;   
    68. background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);   
    69.  color:#739242;   
    70.  font-weight:bold;   
    71.  height:27px;   
    72. line-height:27px;   
    73. }   
    74. .Contentbox{   
    75.  clear:both;   
    76.  margin-top:0px;   
    77.  border:1px solid #A8C29F;   
    78.  border-top:none;   
    79.  height:181px;   
    80.  text-align:center;   
    81.  padding-top:8px;   
    82. }   
    83. -->  
    84. </style>  
    85. <script>  
    86. <!--   
    87. /*第一种形式 第二种形式 更换显示样式*/   
    88. function setTab(name,cursel,n){   
    89.  for(i=1;i<=n;i++){   
    90.   var menu=document.getElementById(name+i);   
    91.   var con=document.getElementById("con_"+name+"_"+i);   
    92.   menu.className=i==cursel?"hover":"";   
    93.   con.style.display=i==cursel?"block":"none";   
    94.  }   
    95. }   
    96. //-->  
    97. </script>  
    98. </head>  
    99. <body>  
    100. <br><br>  
    101. <div id="Tab1">  
    102. <div class="Menubox">  
    103. <ul>  
    104.    <li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>  
    105.    <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>  
    106.    <li id="one3" onclick="setTab('one',3,4)">新闻3</li>  
    107.    <li id="one4" onclick="setTab('one',4,4)">新闻4</li>  
    108. </ul>  
    109. </div>  
    110.  <div class="Contentbox">  
    111.    <div id="con_one_1" class="hover">新闻列表1</div>  
    112.    <div id="con_one_2" style="display:none">新闻列表2</div>  
    113.    <div id="con_one_3" style="display:none">新闻列表3</div>  
    114.    <div id="con_one_4" style="display:none">新闻列表4</div>  
    115.  </div>  
    116. </div>  
    117. <br>  
    118. <div id="Tab2">  
    119. <div class="Menubox">  
    120. <ul>  
    121.    <li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>  
    122.    <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>  
    123.    <li id="two3" onclick="setTab('two',3,4)">新闻3</li>  
    124.    <li id="two4" onclick="setTab('two',4,4)">新闻4</li>  
    125. </ul>  
    126. </div>  
    127.  <div class="Contentbox">  
    128.    <div id="con_two_1" >新闻列表1</div>  
    129.    <div id="con_two_2" style="display:none">新闻列表2</div>  
    130.    <div id="con_two_3" style="display:none">新闻列表3</div>  
    131.    <div id="con_two_4" style="display:none">新闻列表4</div>  
    132.  </div>  
    133. </div>  
    134. </body>  
    135. </html>  

    2：鼠标经过的
    Html代码 复制代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
    5. <title>简洁Tab</title>  
    6. <style type="text/css">  
    7. <!--   
    8. body,div,ul,li{   
    9.  padding:0;   
    10.  text-align:center;   
    11. }   
    12. body{   
    13.  font:12px "宋体";   
    14.  text-align:center;   
    15. }   
    16. a:link{   
    17.  color:#00F;   
    18.  text-decoration:none;   
    19. }   
    20. a:visited {   
    21.  color: #00F;   
    22.  text-decoration:none;   
    23. }   
    24. a:hover {   
    25.  color: #c00;   
    26.  text-decoration:underline;   
    27. }   
    28. ul{ list-style:none;}   
    29. /*选项卡1*/   
    30. #Tab1{   
    31. 460px;   
    32. margin:0px;   
    33. padding:0px;   
    34. margin:0 auto;}   
    35. /*选项卡2*/   
    36. #Tab2{   
    37. 576px;   
    38. margin:0px;   
    39. padding:0px;   
    40. margin:0 auto;}   
    41. /*菜单class*/   
    42. .Menubox {   
    43. 100%;   
    44. background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);   
    45. height:28px;   
    46. line-height:28px;   
    47. }   
    48. .Menubox ul{   
    49. margin:0px;   
    50. padding:0px;   
    51. }   
    52. .Menubox li{   
    53.  float:left;   
    54.  display:block;   
    55.  cursor:pointer;   
    56.  114px;   
    57.  text-align:center;   
    58.  color:#949694;   
    59.  font-weight:bold;   
    60.  }   
    61. .Menubox li.hover{   
    62.  padding:0px;   
    63.  background:#fff;   
    64.  116px;   
    65.  border-left:1px solid #A8C29F;   
    66.  border-top:1px solid #A8C29F;   
    67.  border-right:1px solid #A8C29F;   
    68. background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);   
    69.  color:#739242;   
    70.  font-weight:bold;   
    71.  height:27px;   
    72. line-height:27px;   
    73. }   
    74. .Contentbox{   
    75.  clear:both;   
    76.  margin-top:0px;   
    77.  border:1px solid #A8C29F;   
    78.  border-top:none;   
    79.  height:181px;   
    80.  text-align:center;   
    81.  padding-top:8px;   
    82. }   
    83. -->  
    84. </style>  
    85. <script>  
    86. <!--   
    87. /*第一种形式 第二种形式 更换显示样式*/   
    88. function setTab(name,cursel,n){   
    89.  for(i=1;i<=n;i++){   
    90.   var menu=document.getElementById(name+i);   
    91.   var con=document.getElementById("con_"+name+"_"+i);   
    92.   menu.className=i==cursel?"hover":"";   
    93.   con.style.display=i==cursel?"block":"none";   
    94.  }   
    95. }   
    96. //-->  
    97. </script>  
    98. </head>  
    99. <body>  
    100. <br><br>  
    101. <div id="Tab1">  
    102. <div class="Menubox">  
    103. <ul>  
    104.    <li id="one1" onmouseover="setTab('one',1,4)"  class="hover">新闻1</li>  
    105.    <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>  
    106.    <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>  
    107.    <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>  
    108. </ul>  
    109. </div>  
    110.  <div class="Contentbox">  
    111.    <div id="con_one_1" class="hover">新闻列表1</div>  
    112.    <div id="con_one_2" style="display:none">新闻列表2</div>  
    113.    <div id="con_one_3" style="display:none">新闻列表3</div>  
    114.    <div id="con_one_4" style="display:none">新闻列表4</div>  
    115.  </div>  
    116. </div>  
    117. <br>  
    118. <div id="Tab2">  
    119. <div class="Menubox">  
    120. <ul>  
    121.    <li id="two1" onmouseover="setTab('two',1,4)"  class="hover">新闻1</li>  
    122.    <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>  
    123.    <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>  
    124.    <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li>  
    125. </ul>  
    126. </div>  
    127.  <div class="Contentbox">  
    128.    <div id="con_two_1" >新闻列表1</div>  
    129.    <div id="con_two_2" style="display:none">新闻列表2</div>  
    130.    <div id="con_two_3" style="display:none">新闻列表3</div>  
    131.    <div id="con_two_4" style="display:none">新闻列表4</div>  
    132.  </div>  
    133. </div>  
    134. </body>  
    135. </html>  

    3:三种简单的Tab选项卡效果
    Html代码 复制代码
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
    5. <title>简洁Tab</title>  
    6. <style type="text/css">  
    7. <!--   
    8. body,div,ul,li{   
    9.  margin:0 auto;   
    10.  padding:0;   
    11. }   
    12. body{   
    13.  font:12px "宋体";   
    14.  text-align:center;   
    15. }   
    16. a:link{   
    17.  color:#00F;   
    18.  text-decoration:none;   
    19. }   
    20. a:visited {   
    21.  color: #00F;   
    22.  text-decoration:none;   
    23. }   
    24. a:hover {   
    25.  color: #c00;   
    26.  text-decoration:underline;   
    27. }   
    28. ul{   
    29.  list-style:none;   
    30. }   
    31. .main{   
    32.  clear:both;   
    33.  padding:8px;   
    34.  text-align:center;   
    35. }   
    36. /*第一种形式*/   
    37. #tabs0 {   
    38.  height: 200px;   
    39.   400px;   
    40.  border: 1px solid #cbcbcb;   
    41.  background-color: #f2f6fb;   
    42. }   
    43. .menu0{   
    44.   400px;   
    45. }   
    46. .menu0 li{   
    47.  display:block;   
    48.  float: left;   
    49.  padding: 4px 0;   
    50.  100px;   
    51.  text-align: center;   
    52.  cursor:pointer;   
    53.  background: #FFFFff;   
    54. }   
    55. .menu0 li.hover{   
    56.  background: #f2f6fb;   
    57. }   
    58. #main0 ul{   
    59.  display: none;   
    60. }   
    61. #main0 ul.block{   
    62.  display: block;   
    63. }   
    64. /*第二种形式*/   
    65. #tabs1{   
    66.  text-align:left;   
    67.  400px;   
    68. }   
    69. .menu1box{   
    70.  position:relative;   
    71.  overflow:hidden;   
    72.  height:22px;   
    73.  400px;   
    74.  text-align:left;   
    75. }   
    76. #menu1{   
    77.  position:absolute;   
    78.  top:0;   
    79.  left:0;   
    80.  z-index:1;   
    81. }   
    82. #menu1 li{   
    83.  float:left;   
    84.  display:block;   
    85.  cursor:pointer;   
    86.  72px;   
    87.  text-align:center;   
    88.  line-height:21px;   
    89.  height:21px;   
    90. }   
    91. #menu1 li.hover{   
    92.  background:#fff;   
    93.  border-left:1px solid #333;   
    94.  border-top:1px solid #333;   
    95.  border-right:1px solid #333;   
    96. }   
    97. .main1box{   
    98.  clear:both;   
    99.  margin-top:-1px;   
    100.  border:1px solid #333;   
    101.  height:181px;   
    102.  400px;   
    103. }   
    104. #main1 ul{   
    105.  display: none;   
    106. }   
    107. #main1 ul.block{   
    108.  display: block;   
    109. }   
    110. /*第三种形式*/   
    111. .menu2box{   
    112.  position:relative;   
    113.  overflow:hidden;   
    114.  height:22px;   
    115.  400px;   
    116.  text-align:left;   
    117.  background: #FFFFff;   
    118. }   
    119. #tabs2 {   
    120.  height: 200px;   
    121.   400px;   
    122.  border: 1px solid #cbcbcb;   
    123.  background-color: #f2f6fb;   
    124. }   
    125. #tip2{   
    126.  position:absolute;   
    127.  top:0;   
    128.  left:0;   
    129.  height:22px;   
    130.  line-height:22px;   
    131.  z-index:0;   
    132.  100px;   
    133.  background: #f2f6fb;   
    134. }   
    135. #menu2{   
    136.  position:absolute;   
    137.  top:0;   
    138.  left:0;   
    139.  z-index:1;   
    140. }   
    141. #menu2 li{   
    142.  display:block;   
    143.  float: left;   
    144.  padding: 4px 0;   
    145.  100px;   
    146.  text-align: center;   
    147.  cursor:pointer;   
    148. }   
    149. -->  
    150. </style>  
    151. <script>  
    152. <!--   
    153. /*第一种形式 第二种形式 更换显示样式*/   
    154. function setTab(m,n){   
    155.  var tli=document.getElementById("menu"+m).getElementsByTagName("li");   
    156.  var mli=document.getElementById("main"+m).getElementsByTagName("ul");   
    157.  for(i=0;i<tli.length;i++){   
    158.   tli[i].className=i==n?"hover":"";   
    159.   mli[i].style.display=i==n?"block":"none";   
    160.  }   
    161. }   
    162. /*第三种形式 利用一个背景层定位*/   
    163. var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}   
    164. function nowtab(m,n){   
    165.  if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;   
    166.  document.getElementById("tip"+m).style.left=n*100+'px';   
    167.  document.getElementById("main2").innerHTML=m3[n];   
    168. }   
    169. //-->  
    170. </script>  
    171. </head>  
    172. <body>  
    173. <br />  
    174. <br />  
    175. <!--第一种形式-->  
    176. <div id="tabs0">  
    177.  <ul class="menu0" id="menu0">  
    178.   <li onclick="setTab(0,0)" class="hover">新闻</li>  
    179.   <li onclick="setTab(0,1)">评论</li>  
    180.   <li onclick="setTab(0,2)">技术</li>  
    181.   <li onclick="setTab(0,3)">点评</li>  
    182.  </ul>  
    183.  <div class="main" id="main0">  
    184.   <ul class="block"><li>新闻列表</li></ul>  
    185.   <ul><li>评论列表</li></ul>  
    186.   <ul><li>技术列表</li></ul>  
    187.   <ul><li>点评列表</li></ul>  
    188.  </div>  
    189. </div>  
    190. <br />  
    191. <br />  
    192. <!--第二种形式-->  
    193. <div id="tabs1">  
    194.  <div class="menu1box">  
    195.   <ul id="menu1">  
    196.    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>  
    197.    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>  
    198.    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>  
    199.    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>  
    200.   </ul>  
    201.  </div>  
    202.  <div class="main1box">  
    203.   <div class="main" id="main1">  
    204.    <ul class="block"><li>新闻列表</li></ul>  
    205.    <ul><li>评论列表</li></ul>  
    206.    <ul><li>技术列表</li></ul>  
    207.    <ul><li>点评列表</li></ul>  
    208.   </div>  
    209.  </div>  
    210. </div>  
    211. <br />  
    212. <br />  
    213. <!--第三种形式-->  
    214. <div id="tabs2">  
    215.  <div class="menu2box">  
    216.   <div id="tip2"></div>  
    217.   <ul id="menu2">  
    218.    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>  
    219.    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>  
    220.    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>  
    221.    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>  
    222.   </ul>  
    223.  </div>  
    224.   <div class="main" id="main2">  
    225. 新闻内容   
    226.  </div>  
    227. </div>  
    228. <br />  
    229. <br />  
    230. <br />  
    231. <br />  
    232. <br />  
    233. <br />  
    234. <br />  
    235. <br />  
    236. </body>  
    237. </html>  
  • 相关阅读:
    TLS回调函数
    MySQL-based databases CVE-2016-6664 本地提权
    go语文中panic的使用
    Redis实现分布式锁与任务队列的思路
    mysql添加权限权限用户
    php压缩html代码减少页面响应时间
    Docker搭建nginx+php-fpm运行环境
    vscode使用phpxdebug调试
    PHP7引用类型
    PHPFPM模式三种运行模式
  • 原文地址：https://www.cnblogs.com/Godblessyou/p/1527996.html
Copyright © 2011-2022 走看看