CSS分页实现和设计教程详细指南

2021年3月25日12:43:52 发表评论 871 次浏览

分页是将文档分为几页并为其提供编号的过程。

分页类型：

CSS中有很多分页类型。其中一些如下：

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

简单分页：

这是分页的基本形式。

语法如下：

.pagination {
    display:type
}
.pagination body {
    color:colorname
    decoration: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 = "#" >«</ a >
   < a href = "#" >1</ a >
   < a href = "#" >2</ a >
   < a href = "#" >3</ a >
   < a href = "#" >4</ a >
   < a href = "#" >5</ a >
   < a href = "#" >6</ a >
   < a href = "#" >7</ a >
   < a href = "#" >8</ a >
   < a href = "#" >9</ a >
   < a href = "#" >10</ a >
   < a href = "#" >»</ a >
</ div >
  
</ body >
</ html >

输出如下：

简单分页

主动和悬停分页：

在此分页中, 通过使用活动类, 当前页面将突出显示。当鼠标移到页面链接上时, 悬停将更改页面链接的颜色。

语法如下：

.pagination body.active {
    display:type
    background-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 = "#" >«</ a >
   < a href = "#" >1</ a >
   < a href = "#" >2</ a >
   < a href = "#" >3</ a >
   < a href = "#" >4</ a >
   < a class = "active" href = "#" >5</ a >
   < a href = "#" >6</ a >
   < a href = "#" >7</ a >
   < a href = "#" >8</ a >
   < a href = "#" >9</ a >
   < a href = "#" >10</ a >
   < a href = "#" >»</ a >
</ div >
  
</ body >
</ html >

输出如下：

主动分页

圆形的活动和悬停按钮：

对于圆形的活动按钮和可悬停按钮, 只需添加border-radius属性。

语法如下：

.pagination body.active {
    display:type
    background-color:colorname
    border-radius:size
}
.pagination body:hover:not(.active) {
    background-color:colorname
    border-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 = "#" >«</ a >
   < a href = "#" >1</ a >
   < a href = "#" >2</ a >
   < a href = "#" >3</ a >
   < a href = "#" >4</ a >
   < a class = "active" href = "#" >5</ a >
   < a href = "#" >6</ a >
   < a href = "#" >7</ a >
   < a href = "#" >8</ a >
   < a href = "#" >9</ a >
   < a href = "#" >10</ a >
   < a href = "#" >»</ 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 = "#" >«</ a >
   < a href = "#" >1</ a >
   < a href = "#" >2</ a >
   < a href = "#" >3</ a >
   < a href = "#" >4</ a >
   < a class = "active" href = "#" >5</ a >
   < a href = "#" >6</ a >
   < a href = "#" >7</ a >
   < a href = "#" >8</ a >
   < a href = "#" >9</ a >
   < a href = "#" >10</ a >
   < a href = "#" >»</ 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 = "#" >«</ a >
   < a href = "#" >1</ a >
   < a href = "#" >2</ a >
   < a href = "#" >3</ a >
   < a href = "#" >4</ a >
   < a class = "active" href = "#" >5</ a >
   < a href = "#" >6</ a >
   < a href = "#" >7</ a >
   < a href = "#" >8</ a >
   < a href = "#" >9</ a >
   < a href = "#" >10</ a >
   < a href = "#" >»</ a >
</ div >
  
</ body >
</ html >

输出如下：

分页

圆形边框分页：

可以使用border-radius属性对边界进行舍入。

语法如下：

.pagination body {
    border:type
    border-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 = "#" >«</ a >
   < a href = "#" >1</ a >
   < a href = "#" >2</ a >
   < a href = "#" >3</ a >
   < a href = "#" >4</ a >
   < a class = "active" href = "#" >5</ a >
   < a href = "#" >6</ a >
   < a href = "#" >7</ a >
   < a href = "#" >8</ a >
   < a href = "#" >9</ a >
   < a href = "#" >10</ a >
   < a href = "#" >»</ 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 = "#" >«</ a >
     < a href = "#" >1</ a >
     < a href = "#" >2</ a >
     < a href = "#" >3</ a >
     < a href = "#" >4</ a >
     < a class = "active" href = "#" >5</ a >
     < a href = "#" >6</ a >
     < a href = "#" >7</ a >
     < a href = "#" >8</ a >
     < a href = "#" >9</ a >
     < a href = "#" >10</ a >
     < a href = "#" >»</ a >
   </ div >
</ div >
  
</ body >
</ html >

输出如下：

中心分页

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

语法如下：

.pagination body {
    color:colorname
    margin: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 = "#" >«</ a >
     < a href = "#" >1</ a >
     < a href = "#" >2</ a >
     < a href = "#" >3</ a >
     < a href = "#" >4</ a >
     < a class = "active" href = "#" >5</ a >
     < a href = "#" >6</ a >
     < a href = "#" >7</ a >
     < a href = "#" >8</ a >
     < a href = "#" >9</ a >
     < a href = "#" >10</ a >
     < a href = "#" >»</ a >
   </ div >
</ div >
  
</ body >
</ html >

输出如下：

分页之间的空间

分页大小：可以使用font-size属性更改分页的大小。

语法如下：

.pagination body {
    color:colorname
    font-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 = "#" >«</ a >
     < a href = "#" >1</ a >
     < a href = "#" >2</ a >
     < a href = "#" >3</ a >
     < a href = "#" >4</ a >
     < a class = "active" href = "#" >5</ a >
     < a href = "#" >6</ a >
     < a href = "#" >7</ a >
     < a href = "#" >8</ a >
     < a href = "#" >9</ a >
     < a href = "#" >10</ a >
     < a href = "#" >»</ a >
   </ div >
</ div >
  
</ body >
</ html >

输出如下：

分页大小
木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: