个性化阅读
专注于IT技术分析
        找回密码
当前位置：srcmini > CSS 2 > 正文

CSS分页设计全解

2020-03-04 01:24:31 分类：CSS 2 阅读(1365) 评论(0)

本文概述

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="#">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>
</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="#">?</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>

活动/当前链接和可悬停分页

当你要突出显示当前页面并在每个页面链接上移动鼠标时更改它们的颜色时, 将使用此分页。你必须使用.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="#">?</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>

四舍五入的主动分页

在此分页中, 你使用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="#">?</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>

分页分页

在此分页中, 你可以使用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="#">?</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>

圆形边框分页

此分页方法用于向你的第一个和最后一个分页链接添加圆角边框。

请参阅以下示例：

<!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="#">?</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>

分页之间的空间

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="#">?</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>

分页大小

你可以使用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="#">?</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>

分页居中

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

赞(0)
未经允许不得转载：srcmini » CSS分页设计全解
标签：

相关推荐

评论 抢沙发

评论前必须登录！

 

猜你喜欢

热门标签

网站开发 (2587)WordPress开发 (2055)WordPress主题 (1517)Web开发 (692)主题 (527)数据科学 (444)教程合集 (317)资源合集 (316)函数 (287)页面 (267)python开发 (261)项目示例 (243)WordPress自定义页面 (233)图像 (219)错误 (213)网站 (189)UX设计 (187)Web安全 (179)模板 (178)Web运维 (177)应用程序 (177)WordPress插件 (176)插件 (171)前端开发 (166)算法 (150)woocommerce (149)数据结构 (149)常见问题 (142)网红 (140)设计 (138)