dedecms列表页翻页按钮使用的是{dede:pagelist listitem="index,end,pre,next,pageno" listsize="10"/}生成html后列表页第一页是
<li>首页</li><liclass="thisclass">1</li><li><ahref='news_2.html'>2</a></li><li><ahref='news_3.html'>3</a></li><li><ahref='news_2.html'>下一页</a></li><li><ahref='news_3.html'>末页</a></li>最后一页是:<li><ahref='news_1.html'>首页</a></li><li><ahref='news_2.html'>上一页</a></li><li><ahref='news_1.html'>1</a></li><li><ahref='news_2.html'>2</a></li><liclass="thisclass">3</li><li>末页</li>默认模板的css样式表:
.dede_pages{}.dede_pagesul{float:left;padding:12px0px12px16px;}.dede_pagesulli{float:left;font-family:tahoma;line-height:17px;margin-right:6px;border:1pxsolid#e9e9e9;}.dede_pagesullia{float:left;padding:2px4px2px;color:#555;display:block;}.dede_pagesullia:hover{color:#690;text-decoration:none;padding:2px4px2px;}.dede_pagesulli.thisclass,.dede_pagesulli.thisclassa,.pageboxulli.thisclassa:hover{background-color:#f8f8f8;padding:2px4px2px;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_pagesul{}.dede_pagesulli{float:left;height:18px;line-height:18px;padding:4px10px;margin-right:5px;border:1px#b9cdffsolid;}.dede_pages.thisclass{background:#e3ebfe;}可以看到代码非常简洁,但是对于用户体验来说不是很好,应为现在的按钮是li表现出来而不是a表现出来的,这样当用户点击在按钮却没点击到文字上就等于没点中。为了更好的用户体验我们需要另一种解决办法。第二种方法修改dede:pagelist的相关文件arc.listview.class.php在include文件夹下:打开arc.listview.class.php找到如下代码:
//获得上一页和主页的链接if($this->pageno!=1){$prepage.="<li><ahref='".str_replace("{page}",$prepagenum,$tnamerule)."'>上一页</a></li>";$indexpage="<li><ahref='".str_replace("{page}",1,$tnamerule)."'>首页</a></li>";}else{$indexpage="<li>首页</li>";}//下一页,未页的链接if($this->pageno!=$totalpage&&$totalpage>1){$nextpage.="<li><ahref='".str_replace("{page}",$nextpagenum,$tnamerule)."'>下一页</a></li>";$endpage="<li><ahref='".str_replace("{page}",$totalpage,$tnamerule)."'>末页</a></li>";}else{$endpage="<li>末页</li>";}分别修改$indexpage="<li>首页</li>";$endpage="<li>末页</li>";为$indexpage="<liclass="thisclass">首页</li>";$endpage="<liclass="thisclass">末页</li>";修改好之后{dede:pagelistlistitem="index,end,pre,next,pageno"listsize="10"/}生成的html代码如下:<liclass="thisclass">首页</li><liclass="thisclass">1</li><li><ahref='news_2.html'>2</a></li><li><ahref='news_3.html'>3</a></li><li><ahref='news_2.html'>下一页</a></li><li><ahref='news_3.html'>末页</a></li>第二种方法更简单还增加了用户体验度ps:使用第二种方法就不需要修改css文件了。