css tab选项卡的制作

html如下：

<div class="tab_change">
     <div class="tab_hd">
          <ul class="clearfix">
              <li class="current"><a href="#">首页</a></li>
              <li><a href="#">军事</a></li>
         </ul>
     </div>
     <div class="tab_bd">内容</div>
</div>

css代码如下：

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; font-size:0; }
.clearfix { *zoom:1;}
.tab_change { margin:40px; color:#333; }
.tab_change .tab_hd li { float:left; margin-right:14px; }
.tab_change .tab_hd li a { display:inline-block; *position:relative; margin-bottom:-2px; line-height:24px; padding:0 20px; text-decoration:none; font-weight:bold; color:#333; border:2px solid #dcdcdc; background:#eee; }
.tab_change .tab_hd li.current a,.tab_change .tab_hd li a:hover { padding-bottom:2px; border-bottom:none; background:#fff; }
.tab_change .tab_bd { border:2px solid #dcdcdc; padding:10px; line-height:1.5; background:#fff; }

这里需要注意的是，在浮动闭合的时候，不能对ul使用overflow:hidden;zoom:1;的技术；其次，针对IE6（无视IE7），对链接a使用display:inline-block技术修正IE6 bug。当然，你也可以单单针对IE6使用inline-block，而对于其他的浏览器则正常使用block属性。

效果截图：