2018-11-29 翻页

作者: 清酒金杯空对月 | 来源:发表于2018-11-29 20:47 被阅读0次

2018-11-29 翻页
2018-11-29作业翻页
time(NULL)获取时间戳
翻页，再翻页
动画翻页书 —— 不忘初心童心童趣
每天一条linux命令——less
翻页
翻页
翻页
翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页条</title>
    <style type="text/css">
        *{
    margin: 0;
    padding: 0;
    }

    .DOX{
        width: 964px;
        height: 42px;
        border: 1px solid black;
        margin: 250px auto;
    }

    .box1{
        width: 78px;
        height: 32px;
        background-color: #ff6600;
        margin-left: 200px;
        margin-top: 5px;
        display: inline-block;
    }
    .box1 a{
        display: block;
        font-family: '微软雅黑';
        font-size: 12px;
       text-align: center;
        padding: 5px 0;
        text-decoration: none;
        color: black;
    }

    .box2,.box3,.box4,.box5,.box7,.box8,.box9,.box10{
        width: 35px;
        height: 32px;
        background-color: #ff6600;
        margin-top: 5px;
        display: inline-block;
    }

    .box2 a,.box3 a,.box4 a,.box5 a,.box7 a,.box8 a,.box9 a,.box10 a{
        display: block;
        font-family: '微软雅黑';
        font-size: 12px;
        text-align: center;
        padding: 5px 10px;
        text-decoration: none;
        color: black;
    }
    .box6{
        display: inline-block;
    }
    .box11{
        width: 78px;
        height: 32px;
        background-color: #ff6600;
        margin-top: 5px;
        display: inline-block;
    }
    .box11 a{
        display: block;
        font-family: '微软雅黑';
        font-size: 12px;
        text-align: center;
        padding: 5px 0;
        text-decoration: none;
        color: black;
    }
    .box1 a:hover,.box2 a:hover,.box3 a:hover,.box4 a:hover,.box5 a:hover,.box7 a:hover,.box8     a:hover,.box9 a:hover,.box10 a:hover,.box11 a:hover{
        background-color: red;
    }



    </style>

</head>
<body>
<div class="DOX">
    <div class="box1"><a href="#">上一页</a></div>
    <div class="box2"><a href="#">1</a></div>
    <div class="box3"><a href="#">2</a></div>
    <div class="box4"><a href="#">3</a></div>
    <div class="box5"><a href="#">4</a></div>
   <div class="box6">...</div>
    <div class="box7"><a href="#">17</a></div>
    <div class="box8"><a href="#">18</a></div>
    <div class="box9"><a href="#">19</a></div>
    <div class="box10"><a href="#">20</a></div>
    <div class="box11"><a href="#">下一页</a></div>


</div>
</body>
</html>