How to implement page paging through CSS
One, simple paging
Use paging to navigate each page
1 DOCTYPE html>
2 < html>
3 < head>
4 < meta charset="utf-8">
5 < title>Novice Tutorial (runoob.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 < span style="background-color: #f5f5f5; color: #000000;">{
16 color: black;
17 float: left;
18 padding: 8px 16px;
19 text-decoration: none;
20 }
21 style>
22 head>
23 < body>
24
25 < h2>Simple paginationh2>
26 < ul class="pagination">
27 < li><a href="#">«a>< span style="color: #800000;">li>
28 < li><a href="#">1a>< span style="color: #800000;">li>
29 < li><a class="active" href="#">2 a>li< /span>>
30 < li><a href="#">3a>< span style="color: #800000;">li>
31 < li><a href="#">4a>< span style="color: #800000;">li>
32 < li><a href="#">5a>< span style="color: #800000;">li>
33 < li><a href="#">6a>< span style="color: #800000;">li>
34 < li><a href="#">7a>< span style="color: #800000;">li>
35 < li><a href="#">»a>< span style="color: #800000;">li>
36 ul>
37
38 body>
39 html>
2. Click and hover the pagination style
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >Novice Tutorial (runoob.com)title>
<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: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
style>
head>
<body >
<h2 >Click and mouse-over pagination styleh2>
<p > Move the mouse on the number of the page. p> span>
<ul class="pagination">
<li ><a href="#">«a>li< span style="color: #0000ff;">>
<li ><a href="#">1a>li< span style="color: #0000ff;">>
<li ><a class="active" href="#">2a >li>< /span>
<li ><a href="#">3a>li< span style="color: #0000ff;">>
<li ><a href="#">4a>li< span style="color: #0000ff;">>
<li ><a href="#">5a>li< span style="color: #0000ff;">>
<li ><a href="#">6a>li< span style="color: #0000ff;">>
<li ><a href="#">7a>li< span style="color: #0000ff;">>
<li ><a href="#">»a>li< span style="color: #0000ff;">>
ul>
body>
html>
3. Rounded corner style
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >Novice Tutorial (runoob.com)title>
<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: #4CAF50;
color: white;
border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
style>
head>
<body >
<h2 >Round corner styleh2>
<ul class="pagination">
<li ><a href="#">«a>li< span style="color: #0000ff;">>
<li ><a href="#">1a>li< span style="color: #0000ff;">>
<li ><a class="active" href="#">2a >li>< /span>
<li ><a href="#">3a>li< span style="color: #0000ff;">>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">»a>li>
ul>
body>
html>
四、鼠标悬停过渡效果
DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<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;
transition: background-color .3s;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
style>
head>
<body>
<h2>鼠标悬停过渡效果h2>
<p>鼠标移动到分页码上。p>
<ul class="pagination">
<li><a href="#">«a>li>
<li><a href="#">1a>li>
<li><a class="active" href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">»a>li>
ul>
body>
html>
五、面包屑导航
DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/ 0a0";
}
ul.breadcrumb li a {color: green;}
style>
head>
<body>
<h2>面包屑导航h2>
<ul class="breadcrumb">
<li><a href="#">首页 a>li>
<li><a href="#">前端 a>li>
<li><a href="#">HTML 教程 a>li>
<li>HTML 段落li>
ul>
body>
html>
参考:https://www.runoob.com/css3/css3-pagination.html#
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.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="#">1a>li>
29 <li><a class="active" href="#">2a>li>
30 <li><a href="#">3a>li>
31 <li><a href="#">4a>li>
32 <li><a href="#">5a>li>
33 <li><a href="#">6a>li>
34 <li><a href="#">7a>li>
35 <li><a href="#">»a>li>
36 ul>
37
38 body>
39 html>
DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<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: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
style>
head>
<body>
<h2>点击及鼠标悬停分页样式h2>
<p>移动鼠标的分页的数字上。p>
<ul class="pagination">
<li><a href="#">«a>li>
<li><a href="#">1a>li>
<li><a class="active" href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">»a>li>
ul>
body>
html>
DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<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: #4CAF50;
color: white;
border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
style>
head>
<body>
<h2>圆角样式h2>
<ul class="pagination">
<li><a href="#">«a>li>
<li><a href="#">1a>li>
<li><a class="active" href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">»a>li>
ul>
body>
html>
DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<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;
transition: background-color .3s;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
style>
head>
<body>
<h2>鼠标悬停过渡效果h2>
<p>鼠标移动到分页码上。p>
<ul class="pagination">
<li><a href="#">«a>li>
<li><a href="#">1a>li>
<li><a class="active" href="#">2a>li>
<li><a href="#">3a>li>
<li><a href="#">4a>li>
<li><a href="#">5a>li>
<li><a href="#">6a>li>
<li><a href="#">7a>li>
<li><a href="#">»a>li>
ul>
body>
html>
DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)title>
<style>
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/ 0a0";
}
ul.breadcrumb li a {color: green;}
style>
head>
<body>
<h2>面包屑导航h2>
<ul class="breadcrumb">
<li><a href="#">首页 a>li>
<li><a href="#">前端 a>li>
<li><a href="#">HTML 教程 a>li>
<li>HTML 段落li>
ul>
body>
html>