這篇文章主要介紹了解決Dedecms列表pagelist翻頁按鈕樣式的方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站專注于平鄉(xiāng)企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城網(wǎng)站建設(shè)。平鄉(xiāng)網(wǎng)站建設(shè)公司,為平鄉(xiāng)等地區(qū)提供建站服務(wù)。全流程按需求定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

Dedecms列表pagelist翻頁按鈕樣式怎么解決？

Dedecms列表pagelist翻頁按鈕的首頁和尾頁樣式的解決辦法

推薦學(xué)習(xí)：織夢(mèng)cms

Dedecms列表頁翻頁按鈕使用的是{dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}生成html后列表頁第一頁是

首頁
 
1
 
2
 
3
 
下一頁
 
末頁

最后一頁是：

首頁
 
上一頁
 
1
 
2
 
3
 
末頁

默認(rèn)模板的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;屬性時(shí)

首頁

和

尾頁

這兩個(gè)按鈕就會(huì)比別的按鈕小，想想這種情況是多么難看。

下面就對(duì)以上問題提供兩種解決辦法

第一種方法通過CSS解決，這個(gè)解決辦法就是不控制a標(biāo)簽只對(duì)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;  
}

可以看到代碼非常簡潔，但是對(duì)于用戶體驗(yàn)來說不是很好，應(yīng)為現(xiàn)在的按鈕是li表現(xiàn)出來而不是a表現(xiàn)出來的，這樣當(dāng)用戶點(diǎn)擊在按鈕卻沒點(diǎn)擊到文字上就等于沒點(diǎn)中。為了更好的用戶體驗(yàn)我們需要另一種解決辦法。

第二種方法修改dede:pagelist的相關(guān)文件arc.listview.class.php在include文件夾下：

打開arc.listview.class.php找到如下代碼：

//獲得上一頁和主頁的鏈接 
        if($this->PageNo != 1) 
        { 
            $prepage.="
上一頁
rn"; 
            $indexpage="
首頁
rn"; 
        } 
        else 
        { 
            $indexpage="
首頁
rn"; 
        } 
        //下一頁,未頁的鏈接 
        if($this->PageNo!=$totalpage && $totalpage>1) 
        { 
            $nextpage.="
下一頁
rn"; 
            $endpage="
末頁
rn"; 
        } 
        else 
        { 
            $endpage="
末頁
rn"; 
        }

分別修改$indexpage="

首頁

rn";$endpage="

末頁

rn";為$indexpage="

首頁

rn";$endpage="

末頁

rn";修改好之后{dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}生成的html代碼如下：

首頁
 
1
 
2
 
3
 
下一頁
 
末頁

第二種方法更簡單還增加了用戶體驗(yàn)度

PS：使用第二種方法就不需要修改CSS文件了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享解決Dedecms列表pagelist翻頁按鈕樣式的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來學(xué)習(xí)!

網(wǎng)站題目：解決Dedecms列表pagelist翻頁按鈕樣式的方法
URL網(wǎng)址：http://weahome.cn/article/ighgdc.html