CSS分页设计全解 CSS分页|CSS2

本文概述

基本分页
带有箭头的基本分页
活动/当前链接和可悬停分页
四舍五入的主动分页
分页分页
圆形边框分页
分页之间的空间
分页大小
分页居中

CSS分页是一种在首页上为网站的不同页面编制索引的非常有用的技术。如果你的网站上有很多页面, 则必须在每个页面上添加某种分页。
以下是不同类型的分页：
基本分页这是最简单的分页。你必须对< ul> 元素使用分页类才能实现此分页。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> < 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> Basic Pagination< /h2> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < /ul> < /body> < /html>

带有箭头的基本分页当你有很多页面时使用此分页。它可以帮助你在上一页和下一页使用箭头。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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> Basic Pagination with arrow< /h2> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

活动/当前链接和可悬停分页当你要突出显示当前页面并在每个页面链接上移动鼠标时更改它们的颜色时, 将使用此分页。你必须使用.active类和：hover选择器来实现此效果。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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: brown; color: white; } ul.pagination li a:hover:not(.active) {background-color: lightpink; } < /style> < /head> < body> < h2> Active and Hoverable Pagination< /h2> < p> Move the mouse over the numbers.< /p> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

四舍五入的主动分页【CSS分页设计全解】在此分页中, 你使用border-radius属性来获取四舍五入的“活动”和“悬停”按钮。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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: brown; color: white; border-radius: 5px; } ul.pagination li a:hover:not(.active) {background-color: lightpink; } < /style> < /head> < body> < h2> Rounded Active and Hover Buttons< /h2> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

分页分页在此分页中, 你可以使用border属性为分页添加边框。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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: 1px solid black; } ul.pagination li a.active { background-color: brown; color: white; border: 1px solid grey; } ul.pagination li a:hover:not(.active) {background-color: lightpink; } < /style> < /head> < body> < h2> Bordered Pagination< /h2> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

圆形边框分页此分页方法用于向你的第一个和最后一个分页链接添加圆角边框。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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: 1px solid black; } .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: brown; color: white; border: 1px solid grey; } ul.pagination li a:hover:not(.active) {background-color: lightpink; } < /style> < /head> < body> < h2> Pagination with Rounded Borders< /h2> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

分页之间的空间margin属性用于获取分页中链接之间的空间。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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: 1px solid black; margin: 0 4px; } ul.pagination li a.active { background-color: brown; color: white; border: 1px solid grey; } ul.pagination li a:hover:not(.active) {background-color: lightpink; } < /style> < /head> < body> < h2> Space Between Pagination< /h2> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

分页大小你可以使用font-size属性更改分页的大小。
请参阅以下示例：

< !DOCTYPE html> < html> < head> < 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: 1px solid black; font-size: 22px; } ul.pagination li a.active { background-color: brown; color: white; border: 1px solid grey; } ul.pagination li a:hover:not(.active) {background-color: lightpink; } < /style> < /head> < body> < h2> Pagination Size< /h2> < p> Change the font-size property to make the pagination smaller or bigger.< /p> < ul class="pagination"> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 1< /a> < /li> < li> < a class="active" href="http://www.srcmini.com/#"> 2< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 3< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 4< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 5< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 6< /a> < /li> < li> < a href="http://www.srcmini.com/#"> 7< /a> < /li> < li> < a href="http://www.srcmini.com/#"> ?< /a> < /li> < /ul> < /body> < /html>

分页居中你必须在其周围包裹一个容器元素（例如