CSS paging instance
In this section we will show you how to create paging instances by using CSS.
Simple paging
If your site has many pages, you need to use paging to navigate each page.
The following example demonstrates how to use HTML and CSS to create pages:
CSS instance
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;
}
Click and mouse over paging style
«
1
2
3
4
5
6
7
»
If you click the current page, you can use the .active to set the current page style, you can use the :hover selector to modify the style:
CSS instance
ul.pagination li a.active{
background-color:#4CAF50;
color:white;
}
ul.pagination li a:hover:not(.active){background-color:#ddd;}
CSS instance
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
Fillet styl
«
1
2
3
4
5
6
7
»
Can be used border-radius property to add a fillet style for the selected page number:
CSS instance
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Mouse hover transition effect
«
1
2
3
4
5
6
7
»
We can add transition property to add a transition effect when the mouse moves over the page number
CSS instance
ul.pagination li a {
transition: background-color .3s;
}
Paging with a border
«
1
2
3
4
5
6
7
»
We can use it. border property to add paging with borders:
CSS instance
ul.pagination li a {
border: 1px solid #ddd; /\* Gray \*/
}
Fillet border
Tip: add fillets to the first and last paging links:
«
1
2
3
4
5
6
7
»
CSS instance
.pagination li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Paging interval
Tip: you can use the margin property to add spaces directly to each page number:
«
1
2
3
4
5
6
7
»
CSS instance
ul.pagination li a {
margin: 0 4px; /\* 0 Corresponding to the head and bottom, you can modify it to see the effect \*/
}
Paging font size
«
1
2
3
4
5
6
7
»
We can use it. font-size property to set the font size for paging
CSS instance
ul.pagination li a {
font-size: 22px;
}
Center paging
«
1
2
3
4
5
6
7
»
If you want to center the page, you can add it on the container element (such as < div >) text-align:center style:
CSS instance
div.center {
text-align: center;
}
More Instanc
CSS instance
Bread crumb navigation
Home page
Front end
HTML tutorial
HTML paragraph
Another kind of navigation is bread crumb navigation. An example is as follows:
CSS instance
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: "/\00a0";
}