分页是将文档分为几页并为其提供编号的过程。
分页类型：
CSS中有很多分页类型。其中一些如下：

1. 简单分页
2. 主动和悬停分页
3. 圆形的活动和悬停按钮
4. 悬停过渡效果
5. 分页分页
6. 圆形边框分页
7. 分页居中
8. 分页之间的空间
9. 分页大小

简单分页：
这是分页的基本形式。
语法如下：

.pagination {display:type}.pagination body {color:colornamedecoration:type}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; }.pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; } .GFG { font-size:42px; font-weight:bold; color:#009900; margin-left:100px; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-left:140px; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Simple Pagination< / div > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / body > < / html >

输出如下：

文章图片
主动和悬停分页：
在此分页中, 通过使用活动类, 当前页面将突出显示。当鼠标移到页面链接上时, 悬停将更改页面链接的颜色。
语法如下：

.pagination body.active {display:typebackground-color:colorname}.pagination body:hover:not(.active) {background-color:colorname}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; }.pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; margin-left:100px; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-left:90px; margin-bottom:20px; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Active and Hoverable Pagination< / div > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / body > < / html >

输出如下：

文章图片
圆形的活动和悬停按钮：
对于圆形的活动按钮和可悬停按钮, 只需添加border-radius属性。
语法如下：

.pagination body.active {display:typebackground-color:colornameborder-radius:size}.pagination body:hover:not(.active) {background-color:colornameborder-radius:size}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; }.pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { border-radius:5px; background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; border-radius:5px; } .GFG { font-size:42px; font-weight:bold; color:#009900; margin-left:100px; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-left:40px; margin-bottom:20px; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Rounded Active and Hoverable Pagination< / div > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / body > < / html >

输出如下：

文章图片
悬停过渡效果：
添加了Transition属性, 以在悬停时创建过渡效果。
语法如下：

.pagination body:hover {transition:type}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; }.pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; margin-left:100px; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-left:40px; margin-bottom:20px; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Hoverable Transition Effect Pagination< / div > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / body > < / html >

输出如下：

文章图片
分页分页：
在这种类型的分页中, 将边框添加到分页中。使用border属性为分页添加边框。
语法如下：

.pagination body {border:type}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; } .pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; border:1px solid black; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; margin-left:100px; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-left:140px; margin-bottom:20px; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Bordered Pagination< / div > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / body > < / html >

【CSS分页实现和设计教程详细指南】输出如下：

文章图片
圆形边框分页：
可以使用border-radius属性对边界进行舍入。
语法如下：

.pagination body {border:typeborder-radius:size}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; } .pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; border-radius:5px; border:1px solid black; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; margin-left:100px; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-left:110px; margin-bottom:20px; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Rounded Border Pagination< / div > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / body > < / html >

输出如下：

文章图片
分页居中：
分页可以通过使用text-align属性居中。
语法如下：

.center {text-align:center}.pagination body {color:colorname}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; } .center { text-align:center; } .pagination a { font-weight:bold; font-size:20px; color: black; float: left; padding: 8px 16px; text-decoration: none; border:1px solid black; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; text-align:center; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-bottom:20px; text-align:center; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Centered Pagination< / div > < div class = "center" > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / div > < / body > < / html >

输出如下：

文章图片
分页之间的空间：如果不想对页面链接进行分组, 则可以将它们隔开。使用margin属性在链接之间提供空间。
语法如下：

.pagination body {color:colornamemargin:type}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; } .center { text-align:center; } .pagination a { font-weight:bold; font-size:20px; color: black; float: left; margin:0px 5px; padding: 8px 16px; text-decoration: none; border:1px solid black; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; text-align:center; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-bottom:20px; text-align:center; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Space Between Pagination< / div > < div class = "center" > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / div > < / body > < / html >

输出如下：

文章图片
分页大小：可以使用font-size属性更改分页的大小。
语法如下：

.pagination body {color:colornamefont-size:size}

例子：

< !DOCTYPE html> < html > < head > < style > .pagination { display: inline-block; } .center { text-align:center; } .pagination a { font-weight:bold; font-size:25px; color: black; float: left; padding: 8px 16px; text-decoration: none; border:1px solid black; } .pagination a.active { background-color:#009900; } .pagination a:hover:not(.active) { background-color: #d4d5d2; } .GFG { font-size:42px; font-weight:bold; color:#009900; text-align:center; margin-bottom:60px; } .peg { font-size:24px; font-weight:bold; margin-bottom:20px; text-align:center; } < / style > < / head > < body > < div class = "GFG" > lsbin< / div > < div class = "peg" > Pagination Size< / div > < div class = "center" > < div class = "pagination" > < a href = "https://www.lsbin.com/#" > ?< / a > < a href = "https://www.lsbin.com/#" > 1< / a > < a href = "https://www.lsbin.com/#" > 2< / a > < a href = "https://www.lsbin.com/#" > 3< / a > < a href = "https://www.lsbin.com/#" > 4< / a > < a class = "active" href = "https://www.lsbin.com/#" > 5< / a > < a href = "https://www.lsbin.com/#" > 6< / a > < a href = "https://www.lsbin.com/#" > 7< / a > < a href = "https://www.lsbin.com/#" > 8< / a > < a href = "https://www.lsbin.com/#" > 9< / a > < a href = "https://www.lsbin.com/#" > 10< / a > < a href = "https://www.lsbin.com/#" > ?< / a > < / div > < / div > < / body > < / html >

输出如下：

文章图片

推荐阅读

• 

  ps鼠绘毛发质感教程
• 

  狗身上有红疙瘩怎么回事
• 

  空压机打满气就漏气怎么回事
• 

  什么温度适宜杀红蜘蛛 什么温度适宜杀红蜘蛛幼虫
• 

  苹果手机长时间不用会坏吗
• 

  n纤薄优雅、精工细作，华硕Vivobook360变形笔记本，科技精湛之作
• 

  春婵到死丝方尽蜡炬成灰泪始干这是什么意思 春婵到死丝方尽蜡炬成灰泪始干指什么
• 

  凤凰山事件到底是事实还是骗局,你怎么看？UFO与外星人真的存在吗？
• 

  燃气灶火焰大小不一样怎么解决,一起来学习学习
• 

  火龙果如何挑选皮薄 火龙果如何挑选
• 

  甘蔗什么时候种，甘蔗什么时候种植
• 

  关于马的资料 马的资料介绍
• 

  整切和原切牛排的区别
• 

  家里养橘子树寓意断子绝孙吗 家里养橘子树寓意断子绝孙吗视频
• 

  肥皂除雾妙招 肥皂水除雾妙招
• 

  黛怎么组词 黛组词有什么
• 

  mysql5.6怎么打开 mysql的开启
• 

  美的380v空调最小几匹,这样一对比就清楚了
• 

  OpenCV|【OpenCV 完整例程】90. 频率域陷波滤波器
• 

  货车在高速上收费标准 货车收高速费吗?

• 亚马逊面试体验（电话面试）
• jQuery has()用法详细示例
• JavaScript类型转换用法详细指南
• 算法题（将两个数字相加，使用链表表示|S2）
• 算法（查找数字总和为N的最小数字）
• React Native用法简介和入门指南
• JavaScript基本数组方法详细指南
• 一键装机win7旗舰版图文详细教程图解
• 本文教你电脑如何一键还原