作业（翻页）

作者: 周肸 | 来源:发表于2018-11-29 19:10 被阅读0次

作业（翻页）
作业翻页09-11
翻页，再翻页
动画翻页书 —— 不忘初心童心童趣
2018-11-29作业翻页
每天一条linux命令——less
翻页
翻页
翻页
翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
    <style type="text/css">
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }
        .i{
            width: 960px;
            height: 42px;
            border: 1px solid #d1d1dd;
            margin: 100px auto;
        }
        .l{
            width: 550px;
            margin: 0 auto;
        }
        .l li{
            list-style: none;
        }
        .l li a{
            float: left;
            display: block;
            text-decoration: none;
            font-family:'雅黑';
            font-size: 12px;
            padding: 5px 10px;
            margin-left: 8px;
            background: gold;
            background-color: #FF0;
            margin-top: -8px;
        }
        .l li a:hover{
            background-color: : red;
            color: white;
        }                               

    </style>
</head>
<body>
    <div class="i">
        <div class="l">
            <ul class="clearfix">
                <li><a href="#">上一页</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li>
                    <a href="#" style="background: none;">...</a>
                </li>
                <li><a href="#">17</a></li>
                <li><a href="#">18</a></li>
                <li><a href="#">19</a></li>
                <li><a href="#">20</a></li>
                <li><a href="#">下一页</a></li>
            </ul>
        </div>
    </div>
</body>
</html>