小白教程
所有教程
关于
Search
172.70.34.73
172.70.34.73
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 分页实例”的源代码
本页内容
上一节:
CSS_按钮
下一节:
CSS3_框大小
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS3 分页}}[[Category:CSS 教程|57]] = CSS 分页实例 = 本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。 == 简单分页 == 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; } </style> </head> <body> <h2>简单的分页</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> == 点击及鼠标悬停分页样式 == * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] 如果点击当前页,可以使用 <code>.active</code> 来设置当前页样式,鼠标悬停可以使用 <code>:hover</code> 选择器来修改样式: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; } ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>点击及鼠标悬停分页样式</h2> <p>移动鼠标的分页的数字上。</p> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; } ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>点击及鼠标悬停分页样式</h2> <p>移动鼠标的分页的数字上。</p> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> === 圆角样式 === * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] 可以使用 <code>border-radius</code> 属性为选中的页码来添加圆角样式: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a { border-radius: 5px; } ul.pagination li a.active { border-radius: 5px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; border-radius: 5px; } ul.pagination li a.active { background-color: #4CAF50; color: white; border-radius: 5px; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>圆角样式</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> === 鼠标悬停过渡效果 === * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] 我们可以通过添加 <code>transition</code> 属性来为鼠标移动到页码上时添加过渡效果: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a { transition: background-color .3s; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; } ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>鼠标悬停过渡效果</h2> <p>鼠标移动到分页码上。</p> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> == 带边框分页 == * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] 我们可以使用 <code>border</code> 属性来添加带边框分页: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a { border: 1px solid #ddd; /* Gray */ } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } ul.pagination li a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>带边框分页</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> === 圆角边框 === '''提示:''' 在第一个分页链接和最后一个分页链接添加圆角: * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> .pagination li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .pagination li:last-child a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .pagination li:last-child a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } ul.pagination li a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>圆角边框</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> === 分页间隔 === '''提示:''' 你可以使用 <code>margin</code> 属性来为每个页码直接添加空格: * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a { margin: 0 4px; /* 0 对应的是头部与底部,可以修改它看看效果 */ } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; margin: 0 4px; } ul.pagination li a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>分页间隔</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> == 分页字体大小 == * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] 我们可以使用 <code>font-size</code> 属性来设置分页的字体大小: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.pagination li a { font-size: 22px; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; font-size: 22px; } ul.pagination li a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <h2>分页字体大小</h2> <p>我们可以使用 font-size 属性来设置分页的字体大小:</p> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </body> </html> </run> == 居中分页 == * [[#|«]] * [[#|1]] * [[#|2]] * [[#|3]] * [[#|4]] * [[#|5]] * [[#|6]] * [[#|7]] * [[#|»]] 如果要让分页居中,可以在容器元素上 (如 <div>) 添加 '''text-align:center''' 样式: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> div.center { text-align: center; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } ul.pagination li a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} div.center {text-align: center;} </style> </head> <body> <h2>分页居中</h2> <div class="center"> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" 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="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">»</a></li> </ul> </div> </body> </html> </run> == 更多实例 == === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; font-size: 18px; } ul.pagination li a.active { background-color: #eee; color: black; border: 1px solid #ddd; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <p>上一页,下一页按钮:</p> <ul class="pagination"> <li><a href="#">❮</a></li> <li><a href="#">❯</a></li> </ul> <p>分页导航:</p> <ul class="pagination"> <li><a href="#" class="active">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> </body> </html> </run> == 面包屑导航 == * [javascript:void(0) 首页] * [javascript:void(0) 前端] * [javascript:void(0) HTML 教程] * HTML 段落 另外一种导航为面包屑导航,实例如下: === CSS 实例 === <sample title="" desc="" lang="html" hererun="1"> ul.breadcrumb { padding: 8px 16px; list-style: none; background-color: #eee; } ul.breadcrumb li {display: inline;} ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0"; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> ul.breadcrumb { padding: 8px 16px; list-style: none; background-color: #eee; } ul.breadcrumb li {display: inline;} ul.breadcrumb li+li:before { padding: 8px; color: black; content: "/\00a0"; } ul.breadcrumb li a {color: green;} </style> </head> <body> <h2>面包屑导航</h2> <ul class="breadcrumb"> <li><a href="#">首页 </a></li> <li><a href="#">前端 </a></li> <li><a href="#">HTML 教程 </a></li> <li>HTML 段落</li> </ul> </body> </html> </run>
返回至“
CSS 分页实例
”。
上一节:
CSS_按钮
下一节:
CSS3_框大小