CSS是一種標記語言，可以使用它來樣式化網站的所有視覺元素，其中包括圖片。當我們有大量的圖片需要展示時，很有必要將它們分頁顯示，這樣能夠提高網站加載速度與用戶體驗。下面，我們將通過CSS的方式來實現這一功能。
/* 設置圖片的包裹容器 */
.page-wrapper {
display: flex; /* 讓子元素排列起來 */
flex-wrap: wrap; /* 讓子元素自動換行 */
}
/* 設置每一個圖片項 */
.page-item {
width: calc(33.33% - 20px); /* 每行顯示3個，減去20px的間距 */
margin: 10px; /* 圖片項之間的間距 */
}
/* 設置分頁器樣式 */
.page-link {
display: inline-block;
padding: 5px;
margin-right: 5px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 定義當前頁樣式 */
.page-link.current {
background-color: #b0c4de;
color: #fff;
}這里我們創建了一個包裹容器，其中包含多個圖片項，每個圖片項都是一個 接下來，為了設置分頁器樣式，我們使用了一個具體的類名："page-link"。 在這個類的CSS樣式中，我們設置了內外邊距、背景顏色、邊框和圓角等屬性。最后，我們為當前頁設置了背景顏色和文字顏色，以便使其更加突出。 在應用程序中使用這個分頁器非常容易。只需要通過元素，其中包含一張圖片。在CSS樣式中，我們將圖片項的寬度設為33.33%，以便在一行中顯示三個元素。子元素之間設置了10px的外邊距，使其看起來清晰整齊。標簽分配給圖片項。設置在CSS類中定義的 "page-link" 類，以使分頁器具有指示器按鈕的外觀和感覺。我們用一個 "current" 類名，將樣式應用到當前頁，以突出顯示。