???????{page:bar}
可以看到,一個(gè)完整的分頁(yè)條就出來(lái)了。
而且,每個(gè)元素都已經(jīng)擁有了自己的樣式名稱,例如:.page-status、.page-inde...等。
接下來(lái)只要寫(xiě)上對(duì)應(yīng)的CSS進(jìn)行美化就可以了。
例如:
???????/* 分頁(yè)樣式 */
.paging { margin-top: 32px; font-size: 14px; }
.paging > span { margin: auto 16px; }
.paging .page-numbar { margin: auto 0; }
.paging .page-numbar .page-num,
.paging .page-index,
.paging .page-pre,
.paging .page-next,
.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }
.paging .page-numbar .page-num-current,
.paging .page-numbar .page-num:hover { border-color: #8667F7; color: #8667F7; }
一個(gè)簡(jiǎn)單的分頁(yè)樣式就完成了:
怎么樣?用PbootCMS作者的話來(lái)說(shuō):"是不是簡(jiǎn)單得想哭?"
如果有需求需要對(duì)分頁(yè)條的內(nèi)容進(jìn)行自定義,那么看第二種:獨(dú)立的分頁(yè)元素標(biāo)簽
以本站的分頁(yè)代碼為例:
//通過(guò){page:count}來(lái)判斷當(dāng)前列表的分頁(yè)數(shù)量,如果超過(guò)1頁(yè)則顯示分頁(yè)條
{pboot:if('{page:count}' > 0)}
//分頁(yè)容器
//{page:index}以及{page:pre}指定首頁(yè)和上一頁(yè)的鏈接地址,并且可以在a標(biāo)簽中自由設(shè)置首頁(yè)或者上一頁(yè)的文字
//分頁(yè)條
{page:numbar}
//同首頁(yè)和上一頁(yè),這里是尾頁(yè)和下一頁(yè)
{/pboot:if}
添加樣式美化:
/* 分頁(yè)樣式 */
.frontier-paging { margin-top: 32px; }
.frontier-paging ul { display: inline-block; vertical-align: bottom; }
.frontier-paging ul span,
.frontier-paging ul a { display: block; float: left; margin: auto 2px; padding: 4px 12px; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.07); border-radius: 2px; font-size: 14px; color: #999; }
.frontier-paging ul a.page-num-current,
.frontier-paging ul a:hover { background: #775BFF; color: #FFF; }
效果圖:(由于演示站沒(méi)有加載字體圖標(biāo),箭頭就用普通的括號(hào)來(lái)表示了)
教程到此為止,剩下的就靠大家自由發(fā)揮了。
總結(jié):還是以前所說(shuō)的,PbootCMS的各種標(biāo)簽已經(jīng)非常豐富,能不能做出好的東西,就看能不能熟悉標(biāo)簽,自由組合來(lái)達(dá)成各種需求。
版權(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自定義分頁(yè)樣式的方法
標(biāo)簽:
PbootCMS
相關(guān)文章
-
12-17
(自適應(yīng)手機(jī)端)響應(yīng)式合同申請(qǐng)書(shū)網(wǎng)站模板 word文檔pbootcms網(wǎng)站源碼下載
-
12-14
(自適應(yīng)手機(jī)端)圖書(shū)期刊繪本網(wǎng)站模板 畫(huà)報(bào)期刊雜志pbootcms網(wǎng)站源碼下載
-
12-10
(自適應(yīng)手機(jī))牙科診所網(wǎng)站pbootcms模板 牙科醫(yī)院網(wǎng)站源碼下載
-
12-07
(自適應(yīng)手機(jī)端)響應(yīng)式電子設(shè)備網(wǎng)站模板 - 數(shù)碼科技企業(yè)產(chǎn)品pbootcms源碼帶下載功能
-
12-04
(自適應(yīng)手機(jī))響應(yīng)式個(gè)人博客網(wǎng)站模版 美文博客pbootcms源碼下載 - 帶評(píng)論功能
-
12-01
(自適應(yīng)手機(jī))高爾夫球場(chǎng)pbootcms網(wǎng)站模板 體育運(yùn)動(dòng)場(chǎng)網(wǎng)站源碼下載
-
11-29
(自適應(yīng)手機(jī))電子產(chǎn)品網(wǎng)站pbootcms模板 智能手表數(shù)碼相機(jī)網(wǎng)站源碼下載
-
11-25
(自適應(yīng)手機(jī))童裝外貿(mào)網(wǎng)站pbootcms模板 中英文童裝雙語(yǔ)網(wǎng)站源碼下載
-
11-21
(自適應(yīng)手機(jī)端)中英文雙語(yǔ)外貿(mào)網(wǎng)站汽車配件模板 汽車周邊產(chǎn)品pbootcms網(wǎng)站源碼下載
-
11-17
(自適應(yīng)手機(jī)端)電子產(chǎn)品外貿(mào)企業(yè)網(wǎng)站pbootcms模板 - 機(jī)械電子設(shè)備英文網(wǎng)站源碼帶下載功能
-
11-14
(自適應(yīng)手機(jī)端)響應(yīng)式珠寶首飾pbootcms網(wǎng)站模板 奢侈品金店網(wǎng)站源碼下載
-
11-08
(帶手機(jī))工程造價(jià)財(cái)務(wù)審計(jì)網(wǎng)站模板 企業(yè)管理網(wǎng)站源碼pbootcms下載
-
11-07
(自適應(yīng)手機(jī)端)響應(yīng)式圖片展示pbootcms網(wǎng)站模板 圖片素材網(wǎng)美女圖片網(wǎng)站源碼下載
-
11-06
(自適應(yīng)手機(jī)端)無(wú)人機(jī)英文外貿(mào)網(wǎng)站源碼下載 pbootcms電子產(chǎn)品企業(yè)網(wǎng)站模板下載
-
11-04
(自適應(yīng)手機(jī)端)企業(yè)咨詢管理網(wǎng)站pbootcms模板 金融服務(wù)機(jī)構(gòu)業(yè)務(wù)咨詢網(wǎng)站源碼下載
-
11-03
(自適應(yīng)手機(jī)端)響應(yīng)式電腦手機(jī)維修類網(wǎng)站模版 電腦組裝維修pbootcms網(wǎng)站源碼下載
-
10-29
(PC+WAP)五金機(jī)械設(shè)備營(yíng)銷型網(wǎng)站模板 軸承電子挖掘機(jī)pbootcms源碼下載
-
10-27
(自適應(yīng)手機(jī)版)響應(yīng)式五金外貿(mào)英文網(wǎng)站模板 機(jī)械電子重工業(yè)出口英文源碼pbootcms下載
-
10-15
(獨(dú)立手機(jī)版)單頁(yè)落地頁(yè)推廣網(wǎng)站模板 旅游宣傳推廣pbootcms源碼 - 帶復(fù)制微信號(hào)
-
10-02
(自適應(yīng)手機(jī)端)中藥館中醫(yī)網(wǎng)站模板 中醫(yī)院骨科醫(yī)院網(wǎng)站源碼pbootcms下載
推薦文章
排行榜
- 1185pbootcms偽靜態(tài)教程
- 1144pbootcms模板如何做好安全防護(hù)
- 1134pbootcms模板 pb網(wǎng)站源碼如何做好防護(hù)
- 1099pbootcms模板上傳后 前臺(tái)頁(yè)面是亂的怎么處理
- 1058pbootcms內(nèi)頁(yè)子欄目當(dāng)前欄目如何實(shí)現(xiàn)高亮顯示
- 1036pbootcms當(dāng)前位置面包屑中的首頁(yè)如何改成英文
- 1018欄目頁(yè)調(diào)用當(dāng)前欄目的文章(常用于側(cè)邊欄新聞)
- 1006pbootcms模板首頁(yè)如何調(diào)用指定欄目的子欄目
- 1003pbcms 首頁(yè)調(diào)用頻道下面的幾個(gè)欄目列表的內(nèi)容
- 958pbootcms模板導(dǎo)航調(diào)用方法:
模板推薦
-
(帶手機(jī)版)win電腦操作系統(tǒng)軟件IT軟件下載網(wǎng)站易優(yōu)CMS模板下載
模板名稱:(帶手機(jī)版)win電腦操作系統(tǒng)軟件IT軟件下載網(wǎng)站易優(yōu)CMS模板下載模...
-
(PC+WAP)公司注冊(cè)財(cái)務(wù)會(huì)計(jì)類網(wǎng)站pbootcms模板 藍(lán)色律師公證網(wǎng)站源碼下載
(PC+WAP)公司注冊(cè)財(cái)務(wù)會(huì)計(jì)類網(wǎng)站pbootcms模板 藍(lán)色律師公證網(wǎng)站源碼...
-
(自適應(yīng)手機(jī)端)pbootcms綠色園林建筑藝術(shù)網(wǎng)站模板 花卉園藝網(wǎng)站源碼下載
(自適應(yīng)手機(jī)端)pbootcms綠色園林建筑藝術(shù)網(wǎng)站模板 花卉園藝網(wǎng)站源碼下載P...
-
(自適應(yīng)手機(jī)端)pbootcms響應(yīng)式刷卡機(jī)POS機(jī)網(wǎng)站模板 無(wú)線支付設(shè)備網(wǎng)站源碼
(自適應(yīng)手機(jī)端)pbootcms響應(yīng)式刷卡機(jī)POS機(jī)網(wǎng)站模板 無(wú)線支付設(shè)備網(wǎng)站源...
-
(自適應(yīng)手機(jī)端)pbootcms響應(yīng)式旅游公司網(wǎng)站模板 藍(lán)色寬屏旅行社網(wǎng)站源碼下載
(自適應(yīng)手機(jī)端)pbootcms響應(yīng)式旅游公司網(wǎng)站模板 藍(lán)色寬屏旅行社網(wǎng)站源碼下...
-
熱門(mén)標(biāo)簽
- word文檔
- 合同申請(qǐng)書(shū)
- 期刊雜志
- 畫(huà)報(bào)
- 繪本網(wǎng)站模板
- 圖書(shū)期刊
- 牙科醫(yī)院
- 牙科診所
- 數(shù)碼科技
- 機(jī)械模板
- 機(jī)械風(fēng)機(jī)
- 體育運(yùn)動(dòng)場(chǎng)
- 高爾夫球場(chǎng)
- 數(shù)碼相機(jī)
- 破解版
- PhpStorm
- PHP編程軟件
- 雙語(yǔ)網(wǎng)站
- 童裝
- 童裝外貿(mào)網(wǎng)站
- 多余圖片清理插件
- 文檔定時(shí)發(fā)布插件
- 汽車周邊產(chǎn)品
- 汽車配件模板
- ps制圖軟件
- Photoshop軟件
- 相關(guān)文檔插件
- 易優(yōu)CMS插件
- QQ一鍵登錄
- 易優(yōu)系統(tǒng)助手
- 制圖軟件
- ps軟件
- Photoshop
- 下載功能
- 金店網(wǎng)站
- 劇情介紹
- word資源
- 文案網(wǎng)站
- 電影解說(shuō)
- 財(cái)務(wù)審計(jì)
- 工程造價(jià)
- 圖片素材網(wǎng)
- 業(yè)務(wù)咨詢
- 服務(wù)機(jī)構(gòu)
- 金融服務(wù)
- 企業(yè)咨詢
- 電腦組裝
- 電腦維修
- 軸承電子
- 出口模版
- 五金行業(yè)
- 英文會(huì)員模版
- 易優(yōu)英文版
- 英文網(wǎng)站模版
- 設(shè)計(jì)模版
- 推廣源碼
- 旅游宣傳
- 推廣網(wǎng)站
- 網(wǎng)站展示
- 機(jī)械柜