页码导航条-HTML实现

最新推荐文章于 2025-05-26 20:57:55 发布

原创最新推荐文章于 2025-05-26 20:57:55 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #导航

可重用组件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用HTML代码创建一个页码导航条，通过示例代码展示其实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

这里写图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页码导航条</title>
    <style type="text/css">
        .pagination-bar {
            font-size: 0px;
            padding: 20px 0px;
            text-align: center;
        }

        .pagination-bar a {
            display: inline-block;
            padding: 5px 7.5px;
            text-decoration: none;
            min-width: 20px;
            font-size: 16px;
        }

        .pagination-bar a:not(.disabled) {
            background-color: #FFF;
            color: #666;
            border: 1px solid #BBBBBB;
        }

        .pagination-bar a.disabled {
            background-color: #666;
            color: #FFF;
            border: 1px solid #444;
        }

        .page-prev {
            border-radius: 15px 0px 0px 15px;
        }

        .page-next {
            border-radius: 0px 15px 15px 0px
        }

        .pagination-bar span:not(.active) {
            display: inline-block;
            padding: 5px 7.5px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="pagination-bar">
    <a href="#" class="page-prev disabled">&lt;</a>
    <a href="#" class="disabled">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <span>...</span>
    <a href="#">19</a>
    <a href="#">20</a>
    <a href="#" class="page-next">&gt;</a>
</div>
</body>
</html>