Dedecms列表pagelist翻頁按鈕樣式怎麼解決-DEDECMS-PHP中文網

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

藏色散人

發布： 2020-01-08 09:25:27

原創

2627 人瀏覽過

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=&#39;news_2.html&#39;>2</a></li> 
<li><a href=&#39;news_3.html&#39;>3</a></li> 
<li><a href=&#39;news_2.html&#39;>下一页</a></li> 
<li><a href=&#39;news_3.html&#39;>末页</a></li>

登入後複製

最後一頁是：

<li><a href=&#39;news_1.html&#39;>首页</a></li> 
<li><a href=&#39;news_2.html&#39;>上一页</a></li> 
<li><a href=&#39;news_1.html&#39;>1</a></li> 
<li><a href=&#39;news_2.html&#39;>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;屬性時

首頁

和

尾頁

這兩個按鈕就會比別的按鈕小，想想這種情況是多麼難看。

下面就對以上問題提供兩種解決方法

第一種方法透過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;  
}

登入後複製

可以看到程式碼非常簡潔，但是對於使用者體驗來說不是很好，應為現在的按鈕是li表現出來而不是a表現出來的，這樣當使用者點擊在按鈕卻沒點擊到文字上就等於沒點中。為了更好的使用者體驗我們需要另一個解決方案。

第二種方法修改dede:pagelist的相關檔案arc.listview.class.php在include資料夾下：

開啟arc.listview.class.php找到如下程式碼：

//获得上一页和主页的链接 
        if($this->PageNo != 1) 
        { 
            $prepage.="<li><a href=&#39;".str_replace("{page}",$prepagenum,$tnamerule)."&#39;>上一页</a></li>rn"; 
            $indexpage="<li><a href=&#39;".str_replace("{page}",1,$tnamerule)."&#39;>首页</a></li>rn"; 
        } 
        else 
        { 
            $indexpage="<li >首页</li>rn"; 
        } 
        //下一页,未页的链接 
        if($this->PageNo!=$totalpage && $totalpage>1) 
        { 
            $nextpage.="<li><a href=&#39;".str_replace("{page}",$nextpagenum,$tnamerule)."&#39;>下一页</a></li>rn"; 
            $endpage="<li><a href=&#39;".str_replace("{page}",$totalpage,$tnamerule)."&#39;>末页</a></li>rn"; 
        } 
        else 
        { 
            $endpage="<li >末页</li>rn"; 
        }

登入後複製

分別修改$indexpage="

首頁

rn";$endpage="

末頁

rn";為$indexpage="< ;li class="thisclass">首頁rn";$endpage="

末頁

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

<li class="thisclass">首页</li> 
<li class="thisclass">1</li> 
<li><a href=&#39;news_2.html&#39;>2</a></li> 
<li><a href=&#39;news_3.html&#39;>3</a></li> 
<li><a href=&#39;news_2.html&#39;>下一页</a></li> 
<li><a href=&#39;news_3.html&#39;>末页</a></li>

登入後複製

第二種方法更簡單也增加了使用者體驗度

# PS：使用第二種方法就不需要修改CSS檔案了。

以上是Dedecms列表pagelist翻頁按鈕樣式怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！