本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。
简单分页
如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。
以下实例演示了如何使用 HTML 和 CSS 来创建分页:
HTML
x
39
39
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Web176教程网(web176.com)</title>
6
<style>
7
ul.pagination {
8
display: inline-block;
9
padding: 0;
10
margin: 0;
11
}
12
13
ul.pagination li {display: inline;}
14
15
ul.pagination li a {
16
color: black;
17
float: left;
18
padding: 8px 16px;
19
text-decoration: none;
20
}
21
</style>
22
</head>
23
<body>
24
25
<h2>简单的分页</h2>
26
<ul class="pagination">
27
<li><a href="#">«</a></li>
28
<li><a href="#">1</a></li>
29
<li><a class="active" href="#">2</a></li>
30
<li><a href="#">3</a></li>
31
<li><a href="#">4</a></li>
32
<li><a href="#">5</a></li>
33
<li><a href="#">6</a></li>
34
<li><a href="#">7</a></li>
35
<li><a href="#">»</a></li>
36
</ul>
37
38
</body>
39
</html>
点击及鼠标悬停分页样式
如果点击当前页,可以使用 .active
来设置当前页样式,鼠标悬停可以使用 :hover
选择器来修改样式:
HTML
xxxxxxxxxx
1
47
47
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Web176教程网(web176.com)</title>
6
<style>
7
ul.pagination {
8
display: inline-block;
9
padding: 0;
10
margin: 0;
11
}
12
13
ul.pagination li {display: inline;}
14
15
ul.pagination li a {
16
color: black;
17
float: left;
18
padding: 8px 16px;
19
text-decoration: none;
20
}
21
22
ul.pagination li a.active {
23
background-color: #4CAF50;
24
color: white;
25
}
26
27
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
28
</style>
29
</head>
30
<body>
31
32
<h2>点击及鼠标悬停分页样式</h2>
33
<p>移动鼠标的分页的数字上。</p>
34
<ul class="pagination">
35
<li><a href="#">«</a></li>
36
<li><a href="#">1</a></li>
37
<li><a class="active" href="#">2</a></li>
38
<li><a href="#">3</a></li>
39
<li><a href="#">4</a></li>
40
<li><a href="#">5</a></li>
41
<li><a href="#">6</a></li>
42
<li><a href="#">7</a></li>
43
<li><a href="#">»</a></li>
44
</ul>
45
46
</body>
47
</html>
圆角样式
可以使用 border-radius
属性为选中的页码来添加圆角样式:
HTML
xxxxxxxxxx
1
48
48
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Web176教程网(web176.com)</title>
6
<style>
7
ul.pagination {
8
display: inline-block;
9
padding: 0;
10
margin: 0;
11
}
12
13
ul.pagination li {display: inline;}
14
15
ul.pagination li a {
16
color: black;
17
float: left;
18
padding: 8px 16px;
19
text-decoration: none;
20
border-radius: 5px;
21
}
22
23
ul.pagination li a.active {
24
background-color: #4CAF50;
25
color: white;
26
border-radius: 5px;
27
}
28
29
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
30
</style>
31
</head>
32
<body>
33
34
<h2>圆角样式</h2>
35
<ul class="pagination">
36
<li><a href="#">«</a></li>
37
<li><a href="#">1</a></li>
38
<li><a class="active" href="#">2</a></li>
39
<li><a href="#">3</a></li>
40
<li><a href="#">4</a></li>
41
<li><a href="#">5</a></li>
42
<li><a href="#">6</a></li>
43
<li><a href="#">7</a></li>
44
<li><a href="#">»</a></li>
45
</ul>
46
47
</body>
48
</html>
带边框分页
们可以使用 border
属性来添加带边框分页:
HTML
xxxxxxxxxx
1
49
49
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Web176教程网(web176.com)</title>
6
<style>
7
ul.pagination {
8
display: inline-block;
9
padding: 0;
10
margin: 0;
11
}
12
13
ul.pagination li {display: inline;}
14
15
ul.pagination li a {
16
color: black;
17
float: left;
18
padding: 8px 16px;
19
text-decoration: none;
20
transition: background-color .3s;
21
border: 1px solid #ddd;
22
}
23
24
ul.pagination li a.active {
25
background-color: #4CAF50;
26
color: white;
27
border: 1px solid #4CAF50;
28
}
29
30
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
31
</style>
32
</head>
33
<body>
34
35
<h2>带边框分页</h2>
36
<ul class="pagination">
37
<li><a href="#">«</a></li>
38
<li><a href="#">1</a></li>
39
<li><a class="active" href="#">2</a></li>
40
<li><a href="#">3</a></li>
41
<li><a href="#">4</a></li>
42
<li><a href="#">5</a></li>
43
<li><a href="#">6</a></li>
44
<li><a href="#">7</a></li>
45
<li><a href="#">»</a></li>
46
</ul>
47
48
</body>
49
</html>
圆角边框
提示: 在第一个分页链接和最后一个分页链接添加圆角:
HTML
xxxxxxxxxx
1
59
59
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Web176教程网(web176.com)</title>
6
<style>
7
ul.pagination {
8
display: inline-block;
9
padding: 0;
10
margin: 0;
11
}
12
13
ul.pagination li {display: inline;}
14
15
ul.pagination li a {
16
color: black;
17
float: left;
18
padding: 8px 16px;
19
text-decoration: none;
20
transition: background-color .3s;
21
border: 1px solid #ddd;
22
}
23
24
.pagination li:first-child a {
25
border-top-left-radius: 5px;
26
border-bottom-left-radius: 5px;
27
}
28
29
.pagination li:last-child a {
30
border-top-right-radius: 5px;
31
border-bottom-right-radius: 5px;
32
}
33
34
ul.pagination li a.active {
35
background-color: #4CAF50;
36
color: white;
37
border: 1px solid #4CAF50;
38
}
39
40
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
41
</style>
42
</head>
43
<body>
44
45
<h2>圆角边框</h2>
46
<ul class="pagination">
47
<li><a href="#">«</a></li>
48
<li><a href="#">1</a></li>
49
<li><a class="active" href="#">2</a></li>
50
<li><a href="#">3</a></li>
51
<li><a href="#">4</a></li>
52
<li><a href="#">5</a></li>
53
<li><a href="#">6</a></li>
54
<li><a href="#">7</a></li>
55
<li><a href="#">»</a></li>
56
</ul>
57
58
</body>
59
</html>
分页间隔
提示: 你可以使用 margin
属性来为每个页码直接添加空格:
HTML
xxxxxxxxxx
1
50
50
1
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Web176教程网(web176.com)</title>
6
<style>
7
ul.pagination {
8
display: inline-block;
9
padding: 0;
10
margin: 0;
11
}
12
13
ul.pagination li {display: inline;}
14
15
ul.pagination li a {
16
color: black;
17
float: left;
18
padding: 8px 16px;
19
text-decoration: none;
20
transition: background-color .3s;
21
border: 1px solid #ddd;
22
margin: 0 4px;
23
}
24
25
ul.pagination li a.active {
26
background-color: #4CAF50;
27
color: white;
28
border: 1px solid #4CAF50;
29
}
30
31
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
32
</style>
33
</head>
34
<body>
35
36
<h2>分页间隔</h2>
37
<ul class="pagination">
38
<li><a href="#">«</a></li>
39
<li><a href="#">1</a></li>
40
<li><a class="active" href="#">2</a></li>
41
<li><a href="#">3</a></li>
42
<li><a href="#">4</a></li>
43
<li><a href="#">5</a></li>
44
<li><a href="#">6</a></li>
45
<li><a href="#">7</a></li>
46
<li><a href="#">»</a></li>
47
</ul>
48
49
</body>
50
</html>
阅读剩余 92%
作者:terry,如若转载,请注明出处:https://www.web176.com/css3/4960.html