码迷,mamicode.com
首页 > 其他好文 > 详细

页码简单设计

时间:2018-06-13 21:43:23      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:splay   head   har   line   utf-8   idt   hover   lock   charset   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .page-area ul li{
            display: inline-block;/*inlineblock就可以在一行显示,或者float都可以*/

        }
        .page-area ul li a{
            display: inline-block;
            color: #369;
            height: 34px;
            line-height: 34px;
            text-align: center;
            width: 34px;
            border: 1px solid #e1e1e1;
            border-radius: 15%;
            margin-left: 5px;
        }
        .page-area ul li a.page-next{
            width: 90px;

        }
        .page-area ul li a:hover{
            background-color: #369;/*background是写url的(‘’)*/
            color: white;
        }
</style>
</head>
<body>

<div class="page-area">
    <ul>
        <li><span class="current-page">1</span></li>
        <li><a href="#" class="page-a">2</a></li>
        <li><a href="#" class="page-a">3</a></li>
        <li><a href="#" class="page-a">4</a></li>
        <li><a href="#" class="page-a">5</a></li>
        <li><a href="#" class="page-a">6</a></li>
        <li><a href="#" class="page-a">7</a></li>
        <li><a href="#" class="page-a">8</a></li>
        <li><a href="#" class="page-a">9</a></li>
        <li><a href="#" class="page-a">10</a></li>
        <li><a href="#" class="page-a page-next">下一页</a></li>
    </ul>
</div>

</body>
</html>

 

页码简单设计

标签:splay   head   har   line   utf-8   idt   hover   lock   charset   

原文地址:https://www.cnblogs.com/wfl9310/p/9180097.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!