如何做 - CSS 分頁
學習如何使用 CSS 建立分頁。
如何建立分頁
步驟 1) 新增 HTML
示例
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a class="active" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
步驟 2) 新增 CSS
示例
/* 分頁連結 */
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
/* 設定活動/當前連結的樣式 */
.pagination a.active {
background-color: dodgerblue;
color: white;
}
/* 滑鼠懸停時新增灰色背景 */
.pagination a:hover:not(.active) {background-color: #ddd;}
自己動手試一試 »
轉到我們的 CSS 分頁教程 瞭解有關分頁的更多資訊。
