如何使用 CSS 创建“下一页”和“上一页”按钮？

使用 CSS 创建“下一页”和“上一页”按钮是网页的常见需求，尤其是在多页内容中，因为它简化了不同页面之间的导航。在本文中，我们将了解如何使用 CSS 创建“下一页”和“上一页”按钮。

我们的 HTML 文档中有两个 锚 标签，我们的任务是使用 CSS 设计这两个锚标签以创建“上一页”和“下一页”按钮。

使用 CSS 创建“下一页”和“上一页”按钮

  • 我们使用两个锚标签来表示上一页和下一页按钮。
  • 我们使用 **button** 类来设计这两个按钮的外观，使用 background-color 设置背景颜色，使用 color 设置文本颜色，设置它们的 border，并使用 border-radius 属性创建圆角。
  • 我们设置了按钮的 padding，设置它们的 display 属性，并将其 text-decoration 属性设置为 none，从而移除文本的下划线。
  • 然后，我们使用 hover 伪类在悬停按钮时设置不同的属性。

示例

这是一个完整的示例代码，实现了上述步骤，使用 CSS 创建了下一页和上一页按钮。

<!DOCTYPE html>
<html>
<head>
    <title>
        Creating next and previous Buttons With CSS
    </title>
    <style>
        a {
            text-decoration: none;
            display: inline-block;
            padding: 8px 16px;
        }
        a:hover {
            background-color: white;
            color: #031926;
            border: 2px solid #031926;
        }
        .button {
            background-color: #031926;
            color: white;
            border: 2px solid #031926;
            border-radius: 10%;
        }
    </style>
</head>
<body>
    <h3>
        To Create "next" and "previous" Buttons With CSS
    </h3>
    <p>

    </p>
    <a href="#" class="button">‹ Previous</a>
    <a href="#" class="button">Next ›</a>
</body>
</html>

结论

在本文中，我们了解了如何使用 CSS 创建“下一页”和“上一页”按钮。这是一个简单的任务，可以通过使用基本的 CSS 属性（如 **background-color** 和 **border**）来实现。我们使用了悬停效果来增强交互性。

更新于: 2024年9月3日

5K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告