創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商,新人活動買多久送多久,劃算不套路!
我們提供的服務(wù)有:成都網(wǎng)站設(shè)計、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、永定ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學管理、有技術(shù)的永定網(wǎng)站制作公司這篇文章主要介紹了解決Dedecms列表pagelist翻頁按鈕樣式的方法,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
Dedecms列表pagelist翻頁按鈕樣式怎么解決?
Dedecms列表pagelist翻頁按鈕的首頁和尾頁樣式的解決辦法
推薦學習:織夢cms
Dedecms列表頁翻頁按鈕使用的是{dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}生成html后列表頁第一頁是
<li >首頁</li> <li class="thisclass">1</li> <li><a href='news_2.html'>2</a></li> <li><a href='news_3.html'>3</a></li> <li><a href='news_2.html'>下一頁</a></li> <li><a href='news_3.html'>末頁</a></li>
最后一頁是:
<li><a href='news_1.html'>首頁</a></li> <li><a href='news_2.html'>上一頁</a></li> <li><a href='news_1.html'>1</a></li> <li><a href='news_2.html'>2</a></li> <li class="thisclass">3</li> <li >末頁</li>
默認模板的CSS樣式表:
.dede_pages{ } .dede_pages ul{ float:left; padding:12px 0px 12px 16px; } .dede_pages ul li{ float:left; font-family:Tahoma; line-height:17px; margin-right:6px; border:1px solid #E9E9E9; } .dede_pages ul li a{ float:left; padding:2px 4px 2px; color:#555; display:block; } .dede_pages ul li a:hover{ color:#690; text-decoration:none; padding:2px 4px 2px; } .dede_pages ul li.thisclass, .dede_pages ul li.thisclass a,.pagebox ul li.thisclass a:hover{ background-color:#F8F8F8; padding:2px 4px 2px; font-weight:bold; }
可以看到”.dede_pages ul li a“和”.dede_pages ul li.thisclass“都有padding:2px 4px 2px;屬性但是”.dede_pages ul li“卻沒有。在”.dede_pages ul li“沒有padding:2px 4px 2px;屬性時<li >首頁</li>和<li >尾頁</li>這兩個按鈕就會比別的按鈕小,想想這種情況是多么難看。
下面就對以上問題提供兩種解決辦法
第一種方法通過CSS解決,這個解決辦法就是不控制a標簽只對li添加樣式,代碼如下:
.dede_pages ul{ } .dede_pages ul li{ float:left; height:18px; line-height:18px; padding:4px 10px; margin-right:5px; border:1px #b9cdff solid; } .dede_pages .thisclass{ background:#e3ebfe; }
可以看到代碼非常簡潔,但是對于用戶體驗來說不是很好,應(yīng)為現(xiàn)在的按鈕是li表現(xiàn)出來而不是a表現(xiàn)出來的,這樣當用戶點擊在按鈕卻沒點擊到文字上就等于沒點中。為了更好的用戶體驗我們需要另一種解決辦法。
第二種方法修改dede:pagelist的相關(guān)文件arc.listview.class.php在include文件夾下:
打開arc.listview.class.php找到如下代碼:
//獲得上一頁和主頁的鏈接 if($this->PageNo != 1) { $prepage.="<li><a href='".str_replace("{page}",$prepagenum,$tnamerule)."'>上一頁</a></li>rn"; $indexpage="<li><a href='".str_replace("{page}",1,$tnamerule)."'>首頁</a></li>rn"; } else { $indexpage="<li >首頁</li>rn"; } //下一頁,未頁的鏈接 if($this->PageNo!=$totalpage && $totalpage>1) { $nextpage.="<li><a href='".str_replace("{page}",$nextpagenum,$tnamerule)."'>下一頁</a></li>rn"; $endpage="<li><a href='".str_replace("{page}",$totalpage,$tnamerule)."'>末頁</a></li>rn"; } else { $endpage="<li >末頁</li>rn"; }
分別修改$indexpage="<li >首頁</li>rn";$endpage="<li >末頁</li>rn";為$indexpage="<li class="thisclass">首頁</li>rn";$endpage="<li class="thisclass">末頁</li>rn";修改好之后{dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}生成的html代碼如下:
<li class="thisclass">首頁</li> <li class="thisclass">1</li> <li><a href='news_2.html'>2</a></li> <li><a href='news_3.html'>3</a></li> <li><a href='news_2.html'>下一頁</a></li> <li><a href='news_3.html'>末頁</a></li>
第二種方法更簡單還增加了用戶體驗度
PS:使用第二種方法就不需要修改CSS文件了。
感謝你能夠認真閱讀完這篇文章,希望小編分享解決Dedecms列表pagelist翻頁按鈕樣式的方法內(nèi)容對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道,遇到問題就找創(chuàng)新互聯(lián),詳細的解決方法等著你來學習!
網(wǎng)頁題目:解決Dedecms列表pagelist翻頁按鈕樣式的方法-創(chuàng)新互聯(lián)
鏈接URL:http://vcdvsql.cn/article48/dicchp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、搜索引擎優(yōu)化、Google、營銷型網(wǎng)站建設(shè)、定制開發(fā)、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容