CSS pagination

CSS Pagination Example

In this chapter we will introduce how to create a paging example by using CSS.

Simple paging

If your website has many pages, you need to use paging to navigate each page.

The following example demonstrates how to use HTML and CSS to create pagination

     
  
简单的分页
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Click and mouseover pagination styles

If you click on the current page, you can use .active to set the current period Page style, you can use the :hover selector to modify the style when the mouse is hovering:

     
  
点击及鼠标悬停分页样式
 
移动鼠标的分页的数字上。
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Rounded corner style

You can use the border-radius attribute to add a rounded corner style to the selected page number:

     
  
圆角样式
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Mouseover transition effect

We can add a transition effect when the mouse moves to the page number by adding the transition attribute to the page links to create a transition effect on hover:

     
  
鼠标悬停过渡效果
 
鼠标移动到分页码上。
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Bordered paging

We can use the border attribute to add bordered paging:

     
  
带边框分页
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Paging interval

Tip: You can use the margin attribute to add spaces directly to each page number:

     
  
分页间隔
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Paging font size

We can use the font-size attribute to set the font size of the paging:

     
  
分页字体大小
 
我们可以使用 font-size 属性来设置分页的字体大小:
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Breadcrumb navigation

Another type of navigation is breadcrumb navigation. Examples are as follows:

     
  
面包屑导航
 
 
首页 
 
前端 
 
HTML 教程 
 
HTML 段落