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

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

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

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

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

?

?

?

?

?

?最后一頁是：?

?

?

?

?

?

默認(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;?? }

可以看到代碼非常簡(jiǎn)潔，但是對(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代碼如下：?

?

?

?

?

?

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

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