1. > 
    2. 
    
    
    
    
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <title>仿网易TAB标签title> 
    5. 
    
    
    
    
  5. <FCK:META http-equiv=Content-Type content="text/html; charset=gb2312" /> 
    6. 
    
    
    
    
  6.   <style type=text/css> 
    7. 
    
    
    
    
  7.     BODY {  
    8. 
    
    
    
    
  8.       FONT-SIZE: 14px; }  
    9. 
    
    
    
    
  9.     OL LI {  
    10. 
    
    
    
    
  10.       MARGIN: 8px  
    11. 
    
    
    
    
  11.     }  
    12. 
    
    
    
    
  12.     #con {  
    13. 
    
    
    
    
  13.       FONT-SIZE: 12px;  
    14. 
    
    
    
    
  14.       MARGIN: 0px auto;  
    15. 
    
    
    
    
  15.       WIDTH: 600px  
    16. 
    
    
    
    
  16.     }  
    17. 
    
    
    
    
  17.     #tags {  
    18. 
    
    
    
    
  18.       PADDING-RIGHT: 0px;  
    19. 
    
    
    
    
  19.       PADDING-LEFT: 0px;  
    20. 
    
    
    
    
  20.       PADDING-BOTTOM: 0px;  
    21. 
    
    
    
    
  21.       MARGIN: 0px 0px 0px 10px;  
    22. 
    
    
    
    
  22.       WIDTH: 400px;  
    23. 
    
    
    
    
  23.       PADDING-TOP: 0px;  
    24. 
    
    
    
    
  24.       HEIGHT: 23px  
    25. 
    
    
    
    
  25.     }  
    26. 
    
    
    
    
  26.     #tags LI {  
    27. 
    
    
    
    
  27.       BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/tagleft.gif) no-repeat left bottom; //标签左拐角的图片  
    28. 
    
    
    
    
  28.       FLOAT: left;  
    29. 
    
    
    
    
  29.       MARGIN-RIGHT: 1px;  
    30. 
    
    
    
    
  30.       LIST-STYLE-TYPE: none;  
    31. 
    
    
    
    
  31.       HEIGHT: 23px  
    32. 
    
    
    
    
  32.     }  
    33. 
    
    
    
    
  33.     #tags LI A {  
    34. 
    
    
    
    
  34.       PADDING-RIGHT: 10px;  
    35. 
    
    
    
    
  35.       PADDING-LEFT: 10px;  
    36. 
    
    
    
    
  36.       BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/tagright.gif) no-repeat right bottom; //标签右拐角的图片  
    37. 
    
    
    
    
  37.       FLOAT: left;  
    38. 
    
    
    
    
  38.       PADDING-BOTTOM: 0px;  
    39. 
    
    
    
    
  39.       COLOR: #999;  
    40. 
    
    
    
    
  40.       LINE-HEIGHT: 23px;  
    41. 
    
    
    
    
  41.       PADDING-TOP: 0px;  
    42. 
    
    
    
    
  42.       HEIGHT: 23px;  
    43. 
    
    
    
    
  43.       TEXT-DECORATION: none  
    44. 
    
    
    
    
  44.     }  
    45. 
    
    
    
    
  45.     #tags LI.emptyTag {  
    46. 
    
    
    
    
  46.       BACKGROUND: none transparent scroll repeat 0% 0%;  
    47. 
    
    
    
    
  47.       WIDTH: 4px  
    48. 
    
    
    
    
  48.     }  
    49. 
    
    
    
    
  49.     #tags LI.selectTag {  
    50. 
    
    
    
    
  50.       BACKGROUND-POSITION: left top;  
    51. 
    
    
    
    
  51.       MARGIN-BOTTOM: -2px;  
    52. 
    
    
    
    
  52.       POSITION: relative;  
    53. 
    
    
    
    
  53.       HEIGHT: 25px  
    54. 
    
    
    
    
  54.     }  
    55. 
    
    
    
    
  55.     #tags LI.selectTag A {  
    56. 
    
    
    
    
  56.       BACKGROUND-POSITION: right top;  
    57. 
    
    
    
    
  57.       COLOR: #000;  
    58. 
    
    
    
    
  58.       LINE-HEIGHT: 25px;  
    59. 
    
    
    
    
  59.       HEIGHT: 25px  
    60. 
    
    
    
    
  60.     }  
    61. 
    
    
    
    
  61.     #tagContent {  
    62. 
    
    
    
    
  62.       BORDER-RIGHT: #aecbd4 1px solid;  
    63. 
    
    
    
    
  63.       PADDING-RIGHT: 1px;  
    64. 
    
    
    
    
  64.       BORDER-TOP: #aecbd4 1px solid;  
    65. 
    
    
    
    
  65.       PADDING-LEFT: 1px;  
    66. 
    
    
    
    
  66.       PADDING-BOTTOM: 1px;  
    67. 
    
    
    
    
  67.       BORDER-LEFT: #aecbd4 1px solid;  
    68. 
    
    
    
    
  68.       PADDING-TOP:1px;  
    69. 
    
    
    
    
  69.       BORDER-BOTTOM: #aecbd4 1px solid;  
    70. 
    
    
    
    
  70.       BACKGROUND-COLOR: #fff  
    71. 
    
    
    
    
  71.     }  
    72. 
    
    
    
    
  72.     .tagContent {  
    73. 
    
    
    
    
  73.       PADDING-RIGHT: 10px;  
    74. 
    
    
    
    
  74.       DISPLAY: none;  
    75. 
    
    
    
    
  75.       PADDING-LEFT: 10px;  
    76. 
    
    
    
    
  76.       BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/bg.gif) repeat-x; //显示具体内容的div的背景图片  
    77. 
    
    
    
    
  77.       PADDING-BOTTOM: 10px;  
    78. 
    
    
    
    
  78.       WIDTH: 576px;  
    79. 
    
    
    
    
  79.       COLOR: #474747;  
    80. 
    
    
    
    
  80.       PADDING-TOP: 10px;  
    81. 
    
    
    
    
  81.       HEIGHT: 250px  
    82. 
    
    
    
    
  82.     }  
    83. 
    
    
    
    
  83.     #tagContent DIV.selectTag {  
    84. 
    
    
    
    
  84.       DISPLAY: block  
    85. 
    
    
    
    
  85.     }  
    86. 
    
    
    
    
  86.   style> 
    87. 
    
    
    
    
  87.   <script type=text/javascript> 
    88. 
    
    
    
    
  88.     function selectTag(showContent,selfObj){  
    89. 
    
    
    
    
  89.      var tag = document.getElementById("tags").getElementsByTagName("li");  
    90. 
    
    
    
    
  90.      var tagtaglength = tag.length;  
    91. 
    
    
    
    
  91.      for(i=0; i<taglength; i++){  
    92. 
    
    
    
    
  92.       tag[i].className = "";  
    93. 
    
    
    
    
  93.      }  
    94. 
    
    
    
    
  94.      selfObj.parentNode.className = "selectTag";  
    95. 
    
    
    
    
  95.      for(i=0; j=document.getElementById("tagContent"+i); i++){  
    96. 
    
    
    
    
  96.       j.style.display = "none";  
    97. 
    
    
    
    
  97.      }  
    98. 
    
    
    
    
  98.      document.getElementById(showContent).style.display = "block";  
    99. 
    
    
    
    
  99.     }  
    100. 
    
    
    
    
  100.   script> 
    101. 
    
    
    
    
  101. head> 
    102. 
    
    
    
    
  102. <body> 
    103. 
    
    
    
    
  103.   <DIV id=con> 
    104. 
    
    
    
    
  104.     <UL id=tags> 
    105. 
    
    
    
    
  105.       <LI class="selectTag"><A onClick="selectTag('tagContent0',this)" href="javascript:void(0)">CSS中国A> LI> 
    106. 
    
    
    
    
  106.       <LI><A onClick="selectTag('tagContent1',this)"   href="javascript:void(0)">DIV+CSS教程A> LI> 
    107. 
    
    
    
    
  107.       <LI><A onClick="selectTag('tagContent2',this)"   href="javascript:void(0)">自适应宽度的标签A> LI> 
    108. 
    
    
    
    
  108.     UL> 
    109. 
    
    
    
    
  109.     <DIV id=tagContent> 
    110. 
    
    
    
    
  110.       <DIV style="display:block;" class=tagContent id=tagContent0>DIV+CSS教程CSS中国DIV> 
    111. 
    
    
    
    
  111.       <DIV class="tagContent" id=tagContent1>这时是DIV+CSS教程标签的内容。DIV> 
    112. 
    
    
    
    
  112.       <DIV class=tagContent id=tagContent2>自适应宽度的标签内容。DIV> 
    113. 
    
    
    
    
  113.     DIV> 
    114. 
    
    
    
    
  114.   DIV> 
    115. 
    
    
    
    
  115. body> 
    116. 
    
    
    
    
  116. html> 
    117.