“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

Create instances of paging by using CSS

  1. Simple paging
ul{
  display:inline-block;
  padding:0;
  margin:0;
}
ul li{
  display:inline-block;
}
ul li a{
  color:black;
  float:left;
  padding:8px 16px;
  text-decoration:none;
}
Copy the code

You can beautify simple paging with other CSS properties

  • Use.active to set the current page style, and hover to modify the style using the :hover selector:
ul{
  display:inline-block;
  padding:0;
  margin:0;
}
ul li{
  display:inline-block;
}
ul li a{
  color:black;
  float:left;
  padding:8px 16px;
  text-decoration:none;
}

ul li a.active {
    background-color: #4CAF50;
    color: white;
}
ul li a:hover:not(.active) {/* Hover to set the background */ 
  background-color: #ddd;
}
Copy the code
  • Use the border-radius attribute to add rounded corners to the selected page number:
ul{
  display:inline-block;
  padding:0;
  margin:0;
}
ul li{
  display:inline-block;
}
ul li a{
  color:black;
  float:left;
  padding:8px 16px;
  text-decoration:none;
  border-radius: 5px; /* Use border-radius to add rounded corners :*/
}

ul li a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;  /* Use border-radius to add rounded corners :*/
}
ul li a:hover:not(.active) {
  background-color: #ddd;
}
Copy the code
  • Add the transition effect with Transition
ul li a { 
    transition: background-color .3s; 
}
Copy the code
  • Add border paging through the border
ul li a { 
    border: 1px solid #ddd; /* Gray */ 
} 
Copy the code
  • Use margin to add Spaces for each page number
ul li a{
  margin:0 4px;
}
Copy the code
  • Set the page font size by font-size
ul li a{
  font-size:22px;
}
Copy the code
  • Center the text in the page with text-align:center, which can be set in the outer div
div{
  text-align: center;
}
Copy the code
  • Paging navigation:
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;
    border: 1px solid #ddd;
    font-size: 18px;
}

ul.pagination li a.active {
    background-color: #eee;
    color: black;
    border: 1px solid #ddd;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd; }Copy the code
  • Breadcrumb navigation

The concept of BreadcrumbNavigation comes from the fairy tale “hansel and gretel.” when hansel and gretel were walking through a forest, they got lost by accident. But they found that they had scattered bread crumbs everywhere along the way to help them find their way home. So, breadcrumb navigation tells visitors where they are in the site and how to get back.