了解如何使用CSS創建一個響應分頁。
簡單分頁
如果你有很多頁的網站，你不妨某種分頁添加到每個頁面：
要創建一個分頁，風格HTML列表：
例
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;
} 試一試» 主動和Hoverable分頁
與突出顯示當前頁面.active類，並使用:hover選擇改變移動鼠標超過他們在每個頁面鏈接的顏色：
例
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} 試一試» 圓潤的主動和Hoverable按鈕
添加border-radius ，如果你想有一個圓形的“積極”和“懸停”按鈕屬性：
Hoverable過渡效果
添加transition屬性頁面鏈接創建一個懸停過渡效果：
界定分頁
使用border屬性來添加邊框分頁：
邊框圓角
提示：添加圓角邊框在分頁你的第一個和最後一個環節：
例
.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;
}
試一試» 空間之間的鏈接
提示：添加margin屬性，如果你不想組頁面鏈接：
分頁大小
更改與分頁大小font-size屬性：
分頁中心
要居中分頁，包裝容器元素周圍（如<div>並添加text-align:center
更多示例
例
試一試»麵包屑
分頁的另一個變化是所謂的“麵包屑”：
例
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";
}
試一試»