免费AI编程助手
W3.CSS Pagination (分页)
基本分页
如果您的网站上有很多页面，则可能需要使用某种分页。
要创建基本分页，请使用栏（w3-bar）中的按钮（w3-button）。
实例
<div class="w3-bar">
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
要删除按钮之间的空格，请添加 w3-bar-item 类：
实例
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">1</a>
<a href="#" class="w3-bar-item w3-button">2</a>
<a href="#" class="w3-bar-item w3-button">3</a>
<a href="#" class="w3-bar-item w3-button">4</a>
<a href="#" class="w3-bar-item w3-button">5</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
分页箭头
使用图标库中的HTML实体或图标添加分页箭头：
实例
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">5</a>
<a href="#" class="w3-button">»</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
活动/当前链接
使用 w3-color 类别之一来指示用户所在的页面：
实例
<div class="w3-bar">
<a href="#" class="w3-button">«</a>
<a href="#" class="w3-button w3-green">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
悬停颜色
默认情况下，将鼠标移到分页链接上时，它们将变为灰色背景色。使用任何w3-hover- color类来更改悬停颜色：
实例
<div class="w3-bar">
<a href="#" class="w3-button w3-hover-purple">«</a>
<a href="#" class="w3-button w3-hover-green">1</a>
<a href="#" class="w3-button w3-hover-red">2</a>
<a href="#" class="w3-button w3-hover-blue">3</a>
<a href="#" class="w3-button w3-hover-black">4</a>
<a href="#" class="w3-button w3-hover-orange">»</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
分页大小
使用w3-tiny，w3-small，w3-large，w3-xlarge，w3-xxlarge或 w3-xxxlarge来设置分页大小：
分页居中
要使分页居中，请将“ w3-bar”元素放在“ w3-center”元素内：
实例
<div class="w3-center">
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button">«</a>
<a href="#" class="w3-button">1</a>
<a href="#" class="w3-button">2</a>
<a href="#" class="w3-button">3</a>
<a href="#" class="w3-button">4</a>
<a href="#" class="w3-button">»</a>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
分页边框
添加 w3-border 类以创建带有边框的分页：
圆角分页
在 w3-border 旁边添加 w3-round 类以获取圆角边框：
其他分页示例
w3-bar 类还可用于创建下一页/上一页按钮：
实例
<a href="#" class="w3-button">❮ 上一页</a>
<a href="#" class="w3-button w3-right">下一页 ❯</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
w3-bar 类也可以用于创建嵌入式菜单：
实例
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-dark-grey">主页</a>
<a href="#" class="w3-bar-item w3-button">链接 1</a>
<a href="#" class="w3-bar-item w3-button">链接 2</a>
<a href="#" class="w3-bar-item w3-button">链接 3</a>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
更多建议：