AspNetPager 分頁控件樣式完全指南：網易、拍拍、迅雷三大風格 CSS 代碼與屬性配置

前言：AspNetPager 客製化樣式的關鍵屬性

AspNetPager 是 ASP.NET WebForms 經典的分頁控件，透過設定 CssClass（整體容器樣式）與 CurrentPageButtonClass（當前頁碼樣式），即可輕松套用各種視覺風格。本文提供三大知名網站風格的完整 CSS 與屬性配置，可直接複製使用。

風格一：網易風格（藍色系、當前頁深藍背景白字）

視覺效果

首頁 前頁 1 2 3 4 5 6 7 8 9 10 ... 後頁 尾頁

CSS 代碼

.anpager .cpb {
    background: #1F3A87;
    border: 1px solid #CCCCCC;
    color: #FFFFFF;
    font-weight: bold;
    margin: 5px 4px 0 0;
    padding: 4px 5px 0;
}
.anpager a {
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #1F3A87;
    margin: 5px 4px 0 0;
    padding: 4px 5px 0;
    text-decoration: none;
}
.anpager a:hover {
    background: #1F3A87;
    border: 1px solid #1F3A87;
    color: #FFFFFF;
}

控件屬性設定

<webdiyer:AspNetPager ID="AspNetPager1" runat="server"
    CssClass="anpager"
    CurrentPageButtonClass="cpb"
    ShowPageIndexBox="Always"
    PageIndexBoxType="TextBox"
    ... ></webdiyer:AspNetPager>

風格二：拍拍網風格（橙色系、當前頁橙底白字、Hover 橙色）

視覺效果

首頁 上一頁 1 2 3 4 5 6 7 8 9 10 ... 下一頁 尾頁

CSS 代碼

.paginator {
    font: 11px Arial, Helvetica, sans-serif;
    padding: 10px 20px 10px 0;
    margin: 0px;
}
.paginator a {
    padding: 1px 6px;
    border: solid 1px #ddd;
    background: #fff;
    text-decoration: none;
    margin-right: 2px;
}
.paginator a:visited {
    padding: 1px 6px;
    border: solid 1px #ddd;
    background: #fff;
    text-decoration: none;
}
.paginator .cpb {
    padding: 1px 6px;
    font-weight: bold;
    font-size: 13px;
    border: none;
    color: #fff;
    background: #ffa501;
}
.paginator a:hover {
    color: #fff;
    background: #ffa501;
    border-color: #ffa501;
    text-decoration: none;
}

控件屬性設定

<webdiyer:AspNetPager ID="AspNetPager1" runat="server"
    CssClass="paginator"
    CurrentPageButtonClass="cpb"
    FirstPageText="首頁"
    PrevPageText="上一頁"
    NextPageText="下一頁"
    LastPageText="尾頁"
    ... ></webdiyer:AspNetPager>

風格三：迅雷風格（紅色系、扁平化、當前頁紅底白字）

視覺效果

首頁 上一頁 1 2 3 4 5 6 7 8 9 10 ... 下一頁 尾頁

CSS 代碼

.pages {
    color: #999;
}
.pages a, .pages .cpb {
    text-decoration: none;
    float: left;
    padding: 0 5px;
    border: 1px solid #ddd;
    background: #fff;
    margin: 0 2px;
    font-size: 11px;
    color: #000;
}
.pages a:hover {
    background-color: #E61636;
    color: #fff;
    border: 1px solid #E61636;
    text-decoration: none;
}
.pages .cpb {
    font-weight: bold;
    color: #fff;
    background: #E61636;
    border: 1px solid #E61636;
}

控件屬性設定

<webdiyer:AspNetPager ID="AspNetPager1" runat="server"
    CssClass="pages"
    CurrentPageButtonClass="cpb"
    FirstPageText="首頁"
    PrevPageText="上一頁"
    NextPageText="下一頁"
    LastPageText="尾頁"
    NumericButtonCount="10"
    ... ></webdiyer:AspNetPager>

進階客製化技巧

1. 使用 Less/Sass 變數化主題色

// variables.less
@pager-primary: #1F3A87; // 網易藍
@pager-border: #CCC;
@pager-hover: #1F3A87;
@pager-active-bg: #1F3A87;
@pager-active-color: #FFF;

// 產生對應 CSS 類，切換主題只需改變數

2. 響應式設計：行動裝置隱藏頁碼輸入框

@media (max-width: 480px) {
    .anpager .pageIndexBox { display: none; }
    .anpager a, .anpager .cpb { padding: 8px 12px; font-size: 14px; } // 增大點擊區域
}

3. 整合 Bootstrap 4/5 樣式

.pagination-custom .page-link {
    color: #007bff;
    background: #fff;
    border: 1px solid #dee2e6;
}
.pagination-custom .page-item.active .page-link {
    background: #007bff;
    border-color: #007bff;
    color: #fff;
}
.pagination-custom .page-link:hover {
    background: #e9ecef;
}

// 控件設定
CssClass="pagination pagination-custom"
CurrentPageButtonClass="page-item active"
// 需配合 AspNetPager 模板或 ControlAdapters 調整渲染結構

4. 自訂「首頁/尾頁/上一頁/下一頁」圖示

<webdiyer:AspNetPager ... 
    FirstPageText="<i class='fas fa-angle-double-left'></i>"
    PrevPageText="<i class='fas fa-angle-left'></i>"
    NextPageText="<i class='fas fa-angle-right'></i>"
    LastPageText="<i class='fas fa-angle-double-right'></i>"
    />
// 需引用 Font Awesome

常見問題排解

總結

AspNetPager 樣式客製化核心在於：正確設定 CssClass 與 CurrentPageButtonClass，配合精準的 CSS 選擇器。本文提供的三組經典風格（網易藍、拍拍橙、迅雷紅）涵蓋不同品牌調性，可直接套用或作為客製化基礎。結合 Less/Sass 變數化、響應式設計、圖示字體，能快速打造符合現代 UI 規範的分頁體驗。若專案已引入 Bootstrap，建議改用 Bootstrap Pagination 元件並配合 AspNetPager 模板調整渲染結構，維護性更佳。