花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來(lái)到素材無(wú)憂網(wǎng),按 + 收藏我們
登錄 注冊(cè) 退出 找回密碼

PbootCMS實(shí)現(xiàn)數(shù)字條分頁(yè)樣式效果

時(shí)間： 2024-05-22 09:25 閱讀： 次 作者：素材無(wú)憂網(wǎng)

先看效果圖：

PbootCMS實(shí)現(xiàn)數(shù)字條分頁(yè)樣式效果


在使用PbootCMS開(kāi)發(fā)網(wǎng)站時(shí)，如果需要實(shí)現(xiàn)分頁(yè)功能，可以使用PbootCMS自帶的分頁(yè)組件。其中數(shù)字條是一種非常常見(jiàn)的分頁(yè)效果，本文將介紹如何使用PbootCMS的數(shù)字條分頁(yè)效果以及如何通過(guò)CSS樣式修改數(shù)字條的外觀。

首先，在需要分頁(yè)的模板文件中添加以下代碼：


{pboot:if({page:rows}>0)}

在以上代碼中，{page:numbar}標(biāo)簽表示生成數(shù)字條分頁(yè)效果。執(zhí)行以上代碼后，就可以在網(wǎng)頁(yè)底部看到數(shù)字條分頁(yè)效果了。

數(shù)字條分頁(yè)效果默認(rèn)帶有a鏈接標(biāo)簽和選中效果標(biāo)簽，數(shù)字標(biāo)記的class名稱(chēng)為 page-num，當(dāng)前頁(yè)碼標(biāo)記的class名稱(chēng)為 page-num-current。


修改數(shù)字條分頁(yè)樣式


/* ----- 素材無(wú)憂網(wǎng)分頁(yè)數(shù)字條效果 開(kāi)始 ----- */
.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é)束 ----- */


通過(guò)修改上述CSS樣式中的屬性，例如背景顏色、字體大小、邊框顏色等屬性，就可以輕松地定制數(shù)字條分頁(yè)效果的樣式。

文章搜集與網(wǎng)絡(luò)，如有侵權(quán)請(qǐng)聯(lián)系本站，轉(zhuǎn)載請(qǐng)說(shuō)明出處：http://lebianh.com/pbootcmsjs/10929.html

版權(quán)聲明： 本站資源均來(lái)自互聯(lián)網(wǎng)或會(huì)員發(fā)布，如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系，我們將在24小時(shí)內(nèi)刪除！謝謝！

轉(zhuǎn)載請(qǐng)注明： PbootCMS實(shí)現(xiàn)數(shù)字條分頁(yè)樣式效果

標(biāo)簽：  
相關(guān)文章
推薦文章
模板推薦