CSS childhood

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>

share picture

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>

share picture

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>

WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]
SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 5679 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC

Leave a Comment

Your email address will not be published.