网页组件制作笔记之分页码

在该笔记中将学到一些常用的分页码的制作方法与展示效果

使用 div + a 来制作分页码

在网页中添加 < 和 > 等特殊符号的时候，不能直接在 HTML 代码里写 < 或 >，而是要通过 html 实体标签来代替该符号，如 < 的实体标签是 < 而 > 的实体标签是 >

<html>
    <head>
        <title>Page 展示</title>
        <meta charset="utf-8">
        <style type="text/css">
            .page-normal .page-prev{
                padding:5px 7px;
                border:1px solid #ffe3c6;
                color:#ffe3c6;
            }
            .page-normal .page-curr{
                border:1px solid #ff6500;
                background-color:#ffbe94;
                color:#ff6500;
                padding:5px 7px;
            }
            .page-normal a{
                text-decoration:none;
                color:#ff6500;
                border:1px solid #ff9600;
                padding:5px 7px;
            }
            .page-normal a:hover{
                border:1px solid #ff6500;
                background-color:#ffbe94;
            }
            .page-normal{
                color:#ff6500;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="page-normal">
            <span class="page-prev">&lt;</span>
            <span class="page-curr">1</span>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="">5</a>
            ...
            <a href="">99</a>
            <a href="">100</a>
            <a href="">&gt;</a>
        </div>
    </body>
</html>

显示效果如下：