分頁(yè)列表是我們?cè)陂_(kāi)發(fā)網(wǎng)站和應(yīng)用時(shí)經(jīng)常需要使用到的一種功能。在設(shè)計(jì)分頁(yè)列表時(shí)，除了需要考慮功能和用戶體驗(yàn)以外，還需要考慮分頁(yè)列表的樣式和布局。在本文中，我們將介紹一些常用的CSS樣式和布局技巧，用于設(shè)計(jì)分頁(yè)列表。

/* 定義分頁(yè)列表的樣式 */
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination li {
display: inline-block;
margin: 0 10px;
text-align: center;
}
.pagination li.active {
font-weight: bold;
}
.pagination a {
display: block;
padding: 5px 10px;
background-color: #eee;
border: 1px solid #ddd;
color: #333;
}
.pagination a:hover {
background-color: #ddd;
}

上述代碼定義了一個(gè)簡(jiǎn)單的分頁(yè)列表樣式。其中，使用了flex布局來(lái)讓分頁(yè)列表居中顯示。使用了inline-block讓每個(gè)分頁(yè)項(xiàng)排列在同一行。使用了:hover偽類(lèi)來(lái)定義鼠標(biāo)懸停時(shí)的樣式。同時(shí)，我們還定義了.active類(lèi)來(lái)表示當(dāng)前頁(yè)面所在的頁(yè)碼。

在應(yīng)用中使用這個(gè)樣式非常簡(jiǎn)單。只需要將分頁(yè)列表的HTML代碼嵌入到.pagination元素之內(nèi)即可。例如：

<div class="pagination">
<ul>
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>

通過(guò)這種方式，就可以將分頁(yè)列表和樣式結(jié)合在一起，實(shí)現(xiàn)一個(gè)美觀、易用的分頁(yè)列表。