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
 
»
 
  

Run and try it

---

##Click and mouseover pagination Style

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

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

Run try Just

---

Rounded corner style

Okay Use the border-radius attribute to add a rounded corner style to the selected page number:

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

Run and try it

---

Mouseover transition effect

We can add a transition effect when the mouse moves to the page number by adding the transition attribute

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

Run it and try it

---

Bordered paging

We can use the border attribute to add bordered paging:

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

Run and try it

---

Rounded border

##Tips: Link in the first page And add rounded corners to the last pagination link:

      
  
圆角边框
 
 
«
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
»
 
  

Run and try it

---

Page interval

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

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

Run and try it

---

Pagination font size

We can use the font-size attribute to set the pagination font size:

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

Run it and try it

---

Centered paging

If you want the paging to be centered, you can add the text-align:center style on the container element (such as