W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 分页



W3.CSS 分页

如果你有一个有很多页面的网站,你可以给每一页添加分页:


基础分页

要创建一个基本的分页,在 <ul> 元素上添加 w3-pagination 类即可:

Example

<ul class="w3-pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>
尝试一下 »

分页箭头

使用HTML实体或图标库中的图标都可以为分页添加箭头:

Example

<ul class="w3-pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
尝试一下 »

激活/当前 链接

可以使用 w3-color 类来指定当前用户所在的页面:

Example

<ul class="w3-pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a class="w3-green" href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>
尝试一下 »

悬停颜色

默认情况下,当您将鼠标移动到分页链接上时,它们将获得灰色背景颜色。使用任何一种 w3-hover-color 类可以改变悬停颜色:

Example

<ul class="w3-pagination">
  <li><a href="#" class="w3-hover-purple">&laquo;</a></li>
  <li><a href="#" class="w3-hover-green">1</a></li>
  <li><a href="#" class="w3-hover-red">2</a></li>
  <li><a href="#" class="w3-hover-blue">3</a></li>
  <li><a href="#" class="w3-hover-black">4</a></li>
  <li><a href="#" class="w3-hover-orange">&raquo;</a></li>
</ul>
尝试一下 »


分页尺寸

使用 w3-tinyw3-smallw3-largew3-xlargew3-xxlargew3-xxxlarge 可以设置不同尺寸的分页。

Example

<ul class="w3-pagination w3-xlarge">
尝试一下 »

边框分页

添加 w3-border 类可以创建带有边框的分页:

Example

<ul class="w3-pagination w3-border">
尝试一下 »

圆角边框

在 w3-border 后面添加 w3-round 类可以创建圆角边框:

Example

<ul class="w3-pagination w3-border w3-round">
尝试一下 »

居中对齐的分页

为了使分页居中对齐,可以在 <ul> 外的 <div> 元素添加 class="w3-center"

Example

<div class="w3-center">
  <ul class="w3-pagination w3-xlarge">
    ...
  </ul>
</div>
尝试一下 »

其他分页实例

Next/previous Example

<ul class="w3-pagination w3-border w3-round">
  <li><a href="#">&#10094; Previous</a></li>
  <li><a href="#">Next &#10095;</a></li>
</ul>
尝试一下 »

Menu Example

<ul class="w3-pagination w3-border">
  <li><a href="#" class="w3-light-grey">Home</a></li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
尝试一下 »