使用 CSS 添加可悬停分页

分页用于将给定文档分成多个页面并分配编号。它通过将各种条目或网页内容分成单独的页面，使浏览大量内容变得更容易，从而方便内容切换。启用分页的网页链接允许用户滚动浏览您的内容。CSS 分页是网站首页上不同网页索引的一种有效技术。如果您的网站页面很多，则需要为每个页面实现分页。可悬停分页没什么特别的，只是当用户将鼠标悬停在分页上时，它会显示悬停效果。

CSS 中有不同类型的分页可用，其中一些列在下面 -

  • 简单分页

  • 带边框的分页

  • 活动和可悬停分页

  • 带圆形和可悬停按钮的分页

使用 CSS 创建分页

分页是一系列出现在页面底部的数字。使用分页时，还可以有上一页和下一页按钮。使用 `display: inline-block` 属性，因为页面编号在屏幕上水平显示。分页中包含页面链接，因此要删除链接的默认下划线，请使用 `text-decoration:none`。现在可以为链接添加填充和背景颜色。此外，还可以为分页链接添加 `:hover` 效果。

为了更好地理解如何使用 CSS 添加可悬停分页，让我们看看以下示例 -

示例

让我们看看下面的示例，我们将使用 CSS 创建一个活动且可悬停的页面。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .tp a {
         font-size: 20px;
         float: left;
         padding: 15px 16px;
         text-decoration: none;
      }
      .tp a.active {
         background-color: #ABEBC6;
      }
      .tp a:hover:not(.active) {
         background-color: #E8DAEF;
      }
   </style>
</head>
<body style="background-color:#E5E8E8">
   <div class="tp">
      <a href="#">«</a>
      <a href="#">1</a>
      <a href="#">2</a>
      <a class="active" href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">»</a>
   </div>
</body>
</html>

当我们运行以上代码时，它将生成一个输出，其中包含应用了 CSS 的分页，显示在网页上。

示例

考虑另一个示例，我们将使用列表和 CSS 创建一个圆形且可悬停的分页。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      .pagination li {
         display: inline;
      }
      .pagination li a {
         color: #DE3163;
         font-size: 20px;
         float: left;
         padding: 10px 20px;
         text-decoration: none;
         border-radius: 7px;
      }
      ul.pagination li a.active {
         background-color: #E8DAEF;
         color: #212F3D;
      }
      ul.pagination li a:hover:not(.active) {
         background-color: #FADBD8;
      }
   </style>
</head>
<body style="background-color:#D6EAF8">
   <ul class="pagination">
      <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 class="active" href="#">4</a>
      </li>
      <li>
         <a href="#">»</a>
      </li>
   </ul>
</body>
</html>

运行以上代码后，输出窗口将弹出，在网页上显示应用了 CSS 的分页。

示例

在以下示例中，我们将使用 CSS 创建带边框的分页

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
         font-family: verdana;
         background-color: #EAFAF1;
      }
      ul.tp {
         display: inline-block;
         padding: 0;
      }
      ul.tp li {
         display: inline;
      }
      ul.tp li a {
         float: left;
         padding: 10px 18px;
         text-decoration: none;
         border: 1.2px solid #7D3C98;
      }
      ul.tp li a.active {
         background-color: #DE3163;
         color: #1C2833;
         border: 1.2px solid #7D3C98;
      }
      ul.tp li a:hover:not(.active) {
         background-color: #D6EAF8;
      }
   </style>
</head>
<body>
   <h2>Bordered Pagination</h2>
   <ul class="tp">
      <li>
         <a href="#">«</a>
      </li>
      <li>
         <a href="#">1</a>
      </li>
      <li>
         <a href="#">2</a>
      </li>
      <li>
         <a class="active" href="#">3</a>
      </li>
      <li>
         <a href="#">4</a>
      </li>
      <li>
         <a href="#">»</a>
      </li>
   </ul>
</body>
</html>

当我们运行以上代码时，它将生成一个输出，其中包含文本和带边框的分页，显示在网页的中央。

更新于: 2024年1月8日

207 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告