Copyright 2013-2014 All Rights Reserved Theme by www.warewashingadvisors.com 版權(quán)所有
AB模板網(wǎng)(www.warewashingadvisors.com)專注企業(yè)網(wǎng)站模板制作,包括企業(yè)pbootcms網(wǎng)站模板,靜態(tài)網(wǎng)頁(yè)模板,網(wǎng)站源碼下載,HTML網(wǎng)站模板等等。XML地圖 網(wǎng)站地圖 今日更新
免責(zé)聲明:本站所有資源(模板、圖片)搜集整理于互聯(lián)網(wǎng)或者網(wǎng)友提供,僅供學(xué)習(xí)與交流使用,如果不小心侵犯到你的權(quán)益,請(qǐng)及時(shí)聯(lián)系我們刪除該資源。
數(shù)字條自帶a鏈接標(biāo)簽代碼和選中效果標(biāo)簽
數(shù)字帶class名稱為 page-num,當(dāng)前頁(yè)自帶 page-num-current 樣式
<!-- 分頁(yè) --> {pboot:if({page:rows}>0)} <div class="pagebar"> <div class="pagination"> <a class="page-item page-link hidden-sm" href="{page:index}" title="首頁(yè)">首頁(yè)</a> <a class="page-item page-link" href="{page:pre}" title="上一頁(yè)">上一頁(yè)</a> {page:numbar} <a class="page-item page-link" href="{page:next}" title="下一頁(yè)">下一頁(yè)</a> <a class="page-item page-link hidden-sm" href="{page:last}" title="尾頁(yè)">尾頁(yè)</a> </div> </div> {else} <div class="tac text-secondary">本分類下無(wú)任何數(shù)據(jù)!</div> {/pboot:if} |
CSS樣式代碼
需要給數(shù)字條里的span標(biāo)簽單獨(dú)設(shè)置樣式,使分頁(yè)條更美觀好看
數(shù)字條樣式分頁(yè)條適合企業(yè)網(wǎng)站,行業(yè)網(wǎng)站使用
/* ----- PB分頁(yè)數(shù)字條效果 結(jié)束 ----- */ .pagebar .pagination { display: flex; justify-content: center; margin-top: 10px; } .pagination a { background: #fff; border: 1px solid #ccc; color: #333; font-size: 14px; padding: 8px 12px; margin: 0 5px; border-radius: 3px; } .pagination span { color: #333; font-size: 14px; padding: 8px 2px; margin: 0 5px; border-radius: 3px; } .pagination a:hover { color: #4fc08d; border: 1px solid #4fc08d; } .pagination a.page-num-current { color: #fff; background: #4fc08d; border: 1px solid #4fc08d; } /* ----- PB分頁(yè)數(shù)字條效果 結(jié)束 ----- */ |
顯示效果如下圖所示