CSS 分頁實例
簡單分頁
如果你的網站有很多個頁面，你就需要使用分頁來為每個頁面做導航。
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;
}
圓角樣式
«1234567»
可以使用 border-radius 屬性為選中的頁碼來添加圓角樣式:
CSS 實例
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
鼠標懸停過渡效果
«1234567»
我們可以通過添加 transition 屬性來為鼠標移動到頁碼上時添加過渡效果:
CSS 實例
ul.pagination li a {
transition: background-color .3s;
}
帶邊框分頁
«1234567»
我們可以使用 border 屬性來添加帶邊框分頁:
CSS 實例
ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}
圓角邊框
提示: 在第一個分頁鏈接和最后一個分頁鏈接添加圓角：
«1234567»
CSS 實例
.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;
}