CSS childhood

By CSS

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>

,

Leave a Comment

Your email address will not be published.