CSS pagination分页 - 芒果文档

📌 相关文章

📜 CSS pagination分页

📅 最后修改于: 2020-11-05 08:54:57 🧑 作者: Mango

CSS分页是一种在首页上为网站的不同页面编制索引的非常有用的技术。如果您的网站上有很多页面，则必须在每个页面上添加某种分页。

以下是不同类型的分页：

这是最简单的分页。您必须使用分页类

请参阅以下示例：







Basic Pagination

  1
  2
  3
  4
  5
  6
  7

当您有很多页面时使用此分页。它可以帮助您在上一页和下一页使用箭头。

请参阅以下示例：







Basic Pagination with arrow

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

当您要突出显示当前页面并在每个页面链接上移动鼠标时更改每个页面链接的颜色时，将使用此分页。您必须使用.active类和：hover选择器来实现此效果。

请参阅以下示例：







Active and Hoverable Pagination
Move the mouse over the numbers.

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

在此分页中，您使用border-radius属性来获取四舍五入的“活动”和“悬停”按钮。

请参阅以下示例：







Rounded Active and Hover Buttons

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

在此分页中，您可以使用border属性为该分页添加边框。

请参阅以下示例：







Bordered Pagination

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

此分页方法用于向您的第一个和最后一个分页链接添加圆角边框。

请参阅以下示例：

 





Pagination with Rounded Borders

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

margin属性用于获取分页中链接之间的空间。

请参阅以下示例：







Space Between Pagination

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

您可以使用font-size属性更改分页的大小。

请参阅以下示例：







Pagination Size
Change the font-size property to make the pagination smaller or bigger.

  ?
  1
  2
  3
  4
  5
  6
  7
  ?

您必须在其周围包装一个容器元素(例如