圆角高亮选项卡

时间：2017-01-31 23:31:57 阅读：215 评论：0 收藏：0 [点我收藏+]

<!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>

圆角高亮选项卡

原文：http://www.cnblogs.com/supe/p/6359224.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)