寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,433,008 次
  • 运行天数:612 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

仿126邮箱选项卡的源码

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  
  2. <!–   
  3. 引用时保留下原创作者喽,尊重任何一位原创作者,促进中国互联网进程   
  4. Editor:weasle   
  5. http://www.hxcgw.com   
  6. Email:weasle@163.com   
  7. QQ:112011531   
  8. >  
  9. <html xmlns="http://www.w3.org/1999/xhtml">  
  10. <head>  
  11. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
  12. <title>简洁Tab</title>  
  13. <style type="text/css">  
  14. <!–   
  15. body,div,ul,li{   
  16.  padding:0;   
  17.  text-align:center;   
  18. }   
  19. body{   
  20.  font:12px "宋体";   
  21.  text-align:center;   
  22. }   
  23. a:link{   
  24.  color:#00F;   
  25.  text-decoration:none;   
  26. }   
  27. a:visited {   
  28.  color: #00F;   
  29.  text-decoration:none;   
  30. }   
  31. a:hover {   
  32.  color: #c00;   
  33.  text-decoration:underline;   
  34. }   
  35. ul{ list-style:none;}   
  36. /*选项卡1*/   
  37. #Tab1{   
  38. width:460px;   
  39. margin:0px;   
  40. padding:0px;   
  41. margin:0 auto;}   
  42. /*选项卡2*/   
  43. #Tab2{   
  44. width:576px;   
  45. margin:0px;   
  46. padding:0px;   
  47. margin:0 auto;}   
  48. /*菜单class*/   
  49. .Menubox {   
  50. width:100%;   
  51. background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);   
  52. height:28px;   
  53. line-height:28px;   
  54. }   
  55. .Menubox ul{   
  56. margin:0px;   
  57. padding:0px;   
  58. }   
  59. .Menubox li{   
  60.  float:left;   
  61.  display:block;   
  62.  cursor:pointer;   
  63.  width:114px;   
  64.  text-align:center;   
  65.  color:#949694;   
  66.  font-weight:bold;   
  67.  }   
  68. .Menubox li.hover{   
  69.  padding:0px;   
  70.  background:#fff;   
  71.  width:116px;   
  72.  border-left:1px solid #A8C29F;   
  73.  border-top:1px solid #A8C29F;   
  74.  border-right:1px solid #A8C29F;   
  75. background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);   
  76.  color:#739242;   
  77.  font-weight:bold;   
  78.  height:27px;   
  79. line-height:27px;   
  80. }   
  81. .Contentbox{   
  82.  clear:both;   
  83.  margin-top:0px;   
  84.  border:1px solid #A8C29F;   
  85.  border-top:none;   
  86.  height:181px;   
  87.  text-align:center;   
  88.  padding-top:8px;   
  89. }   
  90. >  
  91. </style>  
  92. <script>  
  93. <!–   
  94. /*第一种形式 第二种形式 更换显示样式*/   
  95. function setTab(name,cursel,n){   
  96.  for(i=1;i<=n;i++){   
  97.   var menu=document.getElementById(name+i);   
  98.   var con=document.getElementById("con_"+name+"_"+i);   
  99.   menu.className=i==cursel?"hover":"";   
  100.   con.style.display=i==cursel?"block":"none";   
  101.  }   
  102. }   
  103. //–>  
  104. </script>  
  105. </head>  
  106. <body>  
  107. <br><br>  
  108. <div id="Tab1">  
  109. <div class="Menubox">  
  110. <ul>  
  111.    <li id="one1" onclick="setTab(‘one’,1,4)" >新闻1</li>  
  112.    <li id="one2" onclick="setTab(‘one’,2,4)" >新闻2</li>  
  113.    <li id="one3" onclick="setTab(‘one’,3,4)">新闻3</li>      
  114.    <li id="one4" onclick="setTab(‘one’,4,4)">新闻4</li>  
  115. </ul>  
  116. </div>  
  117.  <div class="Contentbox">     
  118.    <div id="con_one_1" >新闻列表1</div>  
  119.    <div id="con_one_2" style="display:none">新闻列表2</div>  
  120.    <div id="con_one_3" style="display:none">新闻列表3</div>  
  121.    <div id="con_one_4" style="display:none">新闻列表4</div>    
  122.  </div>  
  123. </div>  
  124. <br>  
  125. <div id="Tab2">  
  126. <div class="Menubox">  
  127. <ul>  
  128.    <li id="two1" onclick="setTab(‘two’,1,4)" >新闻1</li>  
  129.    <li id="two2" onclick="setTab(‘two’,2,4)" >新闻2</li>  
  130.    <li id="two3" onclick="setTab(‘two’,3,4)">新闻3</li>      
  131.    <li id="two4" onclick="setTab(‘two’,4,4)">新闻4</li>  
  132. </ul>  
  133. </div>  
  134.  <div class="Contentbox">     
  135.    <div id="con_two_1" >新闻列表1</div>  
  136.    <div id="con_two_2" style="display:none">新闻列表2</div>  
  137.    <div id="con_two_3" style="display:none">新闻列表3</div>  
  138.    <div id="con_two_4" style="display:none">新闻列表4</div>    
  139.  </div>  
  140. </div>  
  141. </body>  
  142. </html>  
本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2008-01-24
3,074 views
标签: , ,
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。