菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 分页


« 1 2 3 4 5 6 »

基本分页

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

要创建基本分页,请在条形(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-button">&laquo;</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">&raquo;</a>
</div>

自己试试 »


分页箭头

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

« 1 2 3 4 »

示例

<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</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">&raquo;</a>
</div>

自己试试 »



活动/当前链接

« 1 2 3 4 »

使用 w3-color 类之一来指示用户当前所在的页面

示例

<div class="w3-bar">
  <a href="#" class="w3-button">&laquo;</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">&raquo;</a>
</div>

自己试试 »


悬停颜色

« 1 2 3 4 »

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

示例

<div class="w3-bar">
  <a href="#" class="w3-button w3-hover-purple">&laquo;</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">&raquo;</a>
</div>

自己试试 »


分页大小

« 1 2 3 4 »
« 1 2 3 4 »

使用 w3-tinyw3-smallw3-largew3-xlargew3-xxlargew3-xxxlarge 来调整分页大小

示例

<div class="w3-bar w3-xlarge">

自己试试 »


居中分页

« 1 2 3 4 »

要居中分页,请将“w3-bar”元素放入“w3-center”元素中

示例

<div class="w3-center">
<div class="w3-bar">
  <a href="#" class="w3-bar-item w3-button">&laquo;</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">&raquo;</a>
</div>
</div>

自己试试 »


带边框的分页

« 1 2 3 4 5 »

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

示例

<div class="w3-bar w3-border">

自己试试 »

圆角边框

« 1 2 3 4 5 »

在 w3-border 旁边添加 w3-round 类以获得圆角边框

示例

<div class="w3-bar w3-border w3-round">

自己试试 »


其他分页示例

w3-bar 类也可以用来创建下一页/上一页按钮


下一页/上一页示例

<div class="w3-bar w3-border w3-round">
  <a href="#" class="w3-button">&#10094; Previous</a>
  <a href="#" class="w3-button w3-right">Next &#10095;</a>
</div>

自己试试 »

内联菜单示例

<div class="w3-show-inline-block">
<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-dark-grey">Home</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>

自己试试 »


×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持