一段简单的CSS Tab标签切换代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CSS TAB</title>
        <style type="text/css">
            /*重置body, a, ul样式*/
            body{
                margin:0;
                background:#fff;
            }
            a{
                text-decoration:none;
                font-size:13px;
                color:#000;
            }
            ul{
                margin:0;
                padding:0;
                list-style:none;
            }
            /*横版tab样式*/
            ul.nav {
                /*margin,padding,width样式可选*/
                margin-top:10px;
                margin-bottom:10px;
                padding-bottom:3px;
                width:100%;
 
                /*li向左浮动，为了包住li，ul也要浮动*/
                float:left;
                /*
                height有讲究，是ul和a下边框重合的关键，标准盒模型下
                ul.heigh = a.height
                +a.padding_top
                +a.padding_bottom
                +a.border_top
                -ul.padding_bottom
 
                15+5+5+1-3 = 23
                */
                height:23px;
                /*下边框和a的下边框设置成一样的*/
                border-bottom:1px solid #dcdcdc;
            }
            ul.nav li{
                /*实现横版tab的关键，比display:inline更灵活*/
                float:left;
            }
            ul.nav li a {
                /*转换为块级元素才可以设置height,margin,padding等*/
                display:block;
 
                /*同时设置height,padding,margin在IE的兼容模式下可能会
                布局错乱，所以要用<!DOCTYPE html>来让IE使用标准盒模型
                ie5.5暂时不考虑了*/
                height:15px;
                padding:5px;
                margin-left:10px;
 
                /*设置背景色和边框*/
                background:#f5f5f5;
                border:1px solid #dcdcdc;
            }
            ul.nav li a.here, ul.nav li a:hover {
                /*设置背景色，前景色以突出显示，并且把下边框颜色和背景色
                设置相同，以表示标签前置*/
                background:#fff;
                color:#0000cc;
                border-bottom:1px solid #fff;
            }
 
            /*竖版tab， 不解释*/
            ul.leftnav {
                clear:both;
                width:110px; /*a.width+a.padding_left+a.padding_right*/
                border-top:1px solid #dcdcdc;
                border-right:1px solid #dcdcdc;
            }
            ul.leftnav li a {
                display:block;
                height:15px;
                width:100px;
                background:#f5f5f5;
                padding:5px;
                border-bottom:1px solid #dcdcdc;
                border-left:1px solid #dcdcdc;
                border-right:1px solid #dcdcdc;
            }
            ul.leftnav li a.here, ul.leftnav li a:hover {
                background:#fff;
                border-right:1px solid #fff;
                color:#0000cc;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <li><a href="#">首页</a></li>
            <li><a href="#" class="here">技术文章</a></li>
            <li><a href="#">提交文章</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
        <ul class="leftnav">
            <li><a href="#">首页</a></li>
            <li><a href="#" class="here">技术文章</a></li>
            <li><a href="#">提交文章</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </body>
</html>
posted @ 2013-05-27 19:45  萌小孩  阅读(212)  评论(0)    收藏  举报