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;}

親自試一試

圓角的活動可懸停分頁

如果您需要圓角的 "active" 和 "hover" 按鈕，請添加 border-radius 屬性：

實例

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

親自試一試

可懸停的過渡效果

請將 transition 屬性添加到頁面鏈接，創建鼠標懸停時的過渡效果：

實例

.pagination a {
  transition: background-color .3s;
}

親自試一試

帶邊框的分頁

請使用 border 屬性為分頁添加邊框：

實例

.pagination a {
  border: 1px solid #ddd; /* Gray */
}

親自試一試

圓角邊框

提示：在分頁的第一個和最后一個鏈接中添加圓角邊框：

實例

.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 屬性：

實例

.pagination a {
  margin: 0 4px; /* 上下外邊距為 0，可靈活修改 */
}

親自試一試

分頁尺寸

請使用 font-size 屬性更改分頁的大小：

實例

.pagination a {
  font-size: 22px;
}

親自試一試

居中的分頁

如需居中分頁，請使用設置了 text-align:center 的容器元素（如 <div>）包圍它：

實例

.center {
  text-align: center;
}

親自試一試

更多實例

實例

親自試一試

面包屑

分頁的另一種形式是所謂的“面包屑”（breadcrumbs）：

實例

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";
}

親自試一試