MVCPager是ASP.NET MVC框架中使用比較廣泛的分頁控件,通過使用CSS樣式可以實現自定義分頁樣式。
通過CSS樣式可以修改分頁控件的外觀,包括顏色、字體、邊框等。MVCPager控件的CSS文件可以通過NuGet包管理器安裝,也可以手動添加到項目中的Content文件夾中。
/*分頁控件默認樣式*/ .pager { margin-bottom: 15px; margin-top: 15px; text-align: center; } .pager a { -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; color: #0079c1; display: inline-block; font-size: 14px; font-weight: normal; line-height: 1.42857; margin-left: 5px; margin-right: 5px; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap; } .pager a:hover, .pager a:focus { background-color: #f5f5f5; border-color: #0079c1; color: #0079c1; text-decoration: none; } .pager .active a, .pager .active a:hover, .pager .active a:focus { background-color: #0079c1; border-color: #0079c1; color: #fff; } .pager .disabled a, .pager .disabled a:hover, .pager .disabled a:focus { background-color: #f5f5f5; border-color: #ddd; color: #ddd; }
以上CSS樣式為分頁控件默認樣式,如果需要自定義樣式,可以在樣式表中覆蓋默認CSS。例如,可以修改顏色或者去掉邊框等。
/*自定義分頁控件樣式*/ .pager { background-color: #eee; padding: 10px; } .pager a { color: #333; background-color: #fff; border: 1px solid #ccc; } .pager a:hover, .pager a:focus { background-color: #0079c1; border-color: #0079c1; color: #fff; } .pager .active a, .pager .active a:hover, .pager .active a:focus { background-color: #0079c1; border-color: #0079c1; color: #fff; }
以上代碼將分頁控件的背景顏色修改為灰色,頁碼字體顏色修改為黑色,去掉了默認的圓角邊框,同時將激活頁碼的背景顏色和字體顏色修改為藍色。
上一篇nav在css中什么意思
下一篇mysql5.7雙主配置