CSS 分頁示例
學習如何使用 CSS 建立響應式分頁。
簡單分頁
如果您的網站有很多頁面，您可能希望在每個頁面上新增某種分頁
示例
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
自己動手試一試 »
活動和可懸停分頁
用 .active 類高亮顯示當前頁面，並使用 :hover 選擇器在滑鼠懸停時改變每個頁面連結的顏色
示例
.pagination a.active {
background-color: #4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
自己動手試一試 »
圓角活動和可懸停按鈕
如果您想要圓角的“活動”和“懸停”按鈕，請新增 border-radius 屬性
懸停過渡效果
為頁面連結新增 transition 屬性，以建立懸停時的過渡效果
帶邊框的分頁
使用 border 屬性為分頁新增邊框
圓角邊框
提示：為分頁中的第一個和最後一個連結新增圓角邊框
示例
.pagination a:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination a:last-child {
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";
}
自己動手試一試 »
