qzm
4/27/2016 - 10:30 AM

tabs

tabs

tabs.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Tab</title>
        <style>
            ul {
                text-align: center;
                width: auto;
            }
            li {
                /* 去除间隔 */
                margin-right: -4px;
                display: inline-block;
                width: 100px;
                height: 50px;
                background-color: #5f5f5f;
                color: #eee;
                list-style-type: none;
                text-align: center;
                line-height: 50px;
            }
            /* 点击效果 */
            li.active {
                color: #fff;
                background-color: #4CAF50;
            }
            /* 左侧圆角 */
            li:first-child {
                -webkit-border-radius: 5px 0 0 0;
                -moz-border-radius: 5px 0 0 0;
                -ms-border-radius: 5px 0 0 0;
                -o-border-radius: 5px 0 0 0;
                border-radius: 5px 0 0 0;
            }
            /* 右侧圆角 */
            li:last-child {
                -webkit-border-radius: 0 5px 0 0;
                -moz-border-radius: 0 5px 0 0;
                -ms-border-radius: 0 5px 0 0;
                -o-border-radius: 0 5px 0 0;
                border-radius: 0 5px 0 0;
            }

        </style>
    </head>
    <body>
        <ul>
            <li>Tab 1</li>
            <li class="active">Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
        </ul>
    </body>
</html>