Dedecms列表pagelist翻页按钮样式怎么解决

Dedecms列表pagelist翻页按钮样式怎么解决

dedecms列表pagelist翻页按钮样式怎么解决?

DEDECMS列表pagelist翻页按钮的首页和尾页样式的解决办法

推荐学习:织梦cms

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


  • 首页
  •  

  • 1
  •  

  • 2
  •  

  • 3
  •  

  • 下一页
  •  

  • 末页
  •  最后一页是: 

    
    
  • 首页
  •  

  • 上一页
  •  

  • 1
  •  

  • 2
  •  

  • 3
  •  

  • 末页
  • 默认模板的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.phpinclude文件夹下:

    打开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
  •  

  • 下一页
  •  

  • 末页
  • 第二种方法更简单还增加了用户体验度

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

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞10 分享