W3.CSS 分页

« 1 2 3 4 5 6 »

基本分页

如果您的网站有很多页面，您可能需要使用某种分页。

要创建基本分页，请使用按钮 (w3按钮）在酒吧（w3-酒吧）。

示例

亲自试一试»

要删除按钮之间的空间，请添加w3 栏项目类：

示例

亲自试一试»

分页箭头

使用 HTML 实体或图标库中的图标添加分页箭头：

« 1 2 3 4 »

示例

亲自试一试»

活动/当前链接

« 1 2 3 4 »

使用其中之一w3-颜色指示用户当前所在页面的类：

示例

亲自试一试»

悬停颜色

« 1 2 3 4 »

默认情况下，当您将鼠标移动到分页链接上时，它们会获得灰色背景颜色。使用任何w3-悬停-颜色更改悬停颜色的类：

示例

亲自试一试»

分页尺寸

« 1 2 3 4 »

使用w3-小,w3-小号,w3-大号,w3-超大,w3-xxlarge或者w3-xxxlarge调整分页大小：

示例

亲自试一试»

居中分页

« 1 2 3 4 »

要使分页居中，请将 "w3-bar" 元素放入 "w3-center" 元素内：

示例

亲自试一试»

有边框分页

« 1 2 3 4 5 »

添加w3边框类来创建带边框的分页：

示例

亲自试一试»

圆角边框

« 1 2 3 4 5 »

添加w3-轮w3-border 旁边的类用于圆形边框：

示例

亲自试一试»

其他分页示例

w3-bar 类也可用于创建下一个/上一个按钮：

❮ ❯

下一个/上一个示例

<div class="w3-bar w3-border w3-round">
<a href="#" class="w3-button">❮ Previous</a>
<a href="#" class="w3-button w3-right">Next ❯</a>
</div>

亲自试一试»

家链接1 链接2 链接3

内联菜单示例

亲自试一试»