做一个简单的上下翻页的html

最新推荐文章于 2025-05-09 11:56:29 发布

原创最新推荐文章于 2025-05-09 11:56:29 发布 · 1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #内联块

html 专栏收录该内容

4 篇文章

订阅专栏

这样的页面，在每个购物的网站都有，大家有没有想过是怎么做出来的呢，今天就给大家揭秘一下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .con {
            width: 960px;
            height: 40px;
            border: 1px solid #d1d1d1;
            list-style: none;
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 0;
        }

        .con li {
            margin: 7px 5px 0;
            /*把li转为内联块 排成一排*/
            display: inline-block;
        }
        /*把大小的改变加到a上
            一般超链接的点击范围要大一些
        */

        .con a {
            /*转换为内联块 才可以增加a标签的大小*/
            display: inline-block;
            background: gold;
            /*14 12*/
            padding: 7px 10px;
            font-size: 12px;
            /*把行高设置和文字一样 方便计算a标签的高度*/
            line-height: 12px;
            color: #393c35;
            text-decoration: none;
        }

        .con a:hover {
            color: red;
            background-color: blue;
        }

        .con span {
            font-size: 12px;
        }
    </style>
</head>

<body>


    <ul class="con">
        <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><span>...</span></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>


</body>

</html>