css CSS |分页

CSS |分页

原文:https://www.geeksforgeeks.org/css-pagination/

分页是将文档分成页面并为它们提供数字的过程。 分页类型:CSS 中的分页类型很多。其中一些如下:

简单分页
活动和可悬停分页
圆形活动和可悬停按钮
可悬停过渡效果
带边框分页
圆角边框分页
居中分页
分页之间的间距
分页大小

简单分页:这是分页的基本形式。 语法:

.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">GeeksforGeeks</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>

输出: simple pagination

活动和可悬停分页:在此分页中，通过使用活动类，当前页面将被突出显示。当鼠标在页面链接上移动时，悬停将改变页面链接的颜色。 语法:

.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">GeeksforGeeks</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>

输出: active pagination

圆形活动和可悬停按钮:对于圆形活动和可悬停按钮，只需添加边框半径属性。 语法:

.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">GeeksforGeeks</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>

输出: rounded and active pagination

悬停过渡效果:添加过渡属性，在悬停时创建过渡效果。 语法:

.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">GeeksforGeeks</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>

输出: hover transition effect

带边框分页:在这种类型的分页中，会在分页中添加边框。使用 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">GeeksforGeeks</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>

输出: bordered pagination

圆角边框分页:边框可以使用边框半径属性进行圆角。 语法:

.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">GeeksforGeeks</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>

输出: rounded border pagination

居中分页:分页可以使用文本对齐属性居中。 语法:

.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">GeeksforGeeks</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>

输出: centered pagination

分页之间的间隔:如果不想对页面链接进行分组，可以对它们进行间隔。使用 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">GeeksforGeeks</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>

输出: space between pagination

分页大小:分页的大小可以使用 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">GeeksforGeeks</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>

输出: pagination size

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/7366.html

css 查看更多书籍

《GeeksForGeeks CSS 中文教程 2022-06-06》

分类

最近更新

css CSS |分页

CSS |分页

留言

联系客服

数据知识

系统公告

开发文档

css查看更多书籍

《GeeksForGeeks CSS 中文教程 2022-06-06》

css CSS |分页

CSS |分页

留言

联系客服

css 查看更多书籍