圆角高亮选项卡 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>无标题文档</title>
    <link rel="shortcut icon" href="img/icoTest.ico">
</head>
<style type="text/css">
    /*公共样式*/
    ul,li,div{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .floatLeft{
        float: left;
    }
    .floatRight{
        float: right;
    }
    .floatClear{
        clear: both;
    }
    /*样式*/
    .container{
        position: relative;
        width: 302px;
        height: 500px;
        margin: auto;
    }
    .container .nav{
        width:212px;
    }

    .container .nav li{
        width: 80px;
        height: 30px;
        border: 1px solid #ccc;
        border-bottom: none;
        border-radius: 10px 10px 0 0; 
        background-color: #eee;
    }
    .container .nav .native{
        position: absolute;
        z-index: 2;
        height: 31px;
        background-color: #fff;
    }
    .content{
        z-index: 1;
        width: 210px;
        height: 300px;
        border: 1px solid #ccc;
        border-radius: 0 0 10px 10px;
    }
</style>
<body>
    <div class="container">
        <ul class="nav">
            <li class="floatLeft native"></li>
            <li class="floatRight"></li>
        </ul>
        <div class="floatClear"></div>
        <div class="content"></div>
    </div>
</body>
<html>

 

posted @ 2017-01-31 22:30  似  阅读(217)  评论(0)    收藏  举报