纯css tab头

 

　　　
        #tabs ul{
            list-style:none;
            margin:0;
            padding:0;
        }

        #tabs ul li{
            width:100px;
            height:20px;
            display:inline-block;
            *display:inline;
            zoom:1;
            border:solid 1px blue;
            border-left-width:0;
            position:relative;
        }

        #tabs ul li a {
            display: inline-block;
            width: 100px;
            text-align: center;
            text-decoration: none;
            height:20px;
        }

        #tabs ul li a:hover {
            border-bottom:solid 1px #fff;
            _position:absolute;
            /*background-color:#6a5acd;*/
        }
        #tabs ul .first-li{
            border-left-width:1px;
        }
        #content{
            width:403px;
            height:70px;
            border:solid 1px blue;
            border-top-width:0;
        }

 

<div id="tabs">
    <ul><li class="first-li"><a href="#">tab1</a></li><li><a href="#">tab2</a></li><li><a href="#">tab3</a></li><li><a href="#">tab4</a></li></ul>
    <div id="content"></div>
</div>

ul和li之间没有空行，否则tab之间会有几像素的间距

demo:http://xiziyin.appspot.com/demo/tabs.html