如何美化pagelist标签呢？怎么样对分页按钮进行美化呢？这篇经验将以DEDECMS为例子告诉你美化pagelist分页标签的方法。

DEDECMS的pagelist的按钮，排版和体验感感都不是很好。

问题描述：

1，不整齐，不在一条水平线。

2，不好看，颜色需要再美化。

原因分析：

1，源文件代码混乱，标签不统一，导致CSS控制困难。

2，配色太单调。

工具/原料

•  

•  

   

  DEDECMS源程序

   

   

•  

•  

   

  HTML编辑工具

   

   

•  

•  

   

  JS编辑工具

   

   

•  

•  

   

  CSS编辑工具

   

   

•  

•  

   

  IE浏览器（测试用）

   

   

•  

方法/步骤

1.  

2.  

    

   修改源文件：

    

    找出源文件的生成文件，对其生成进行修改：

    

   修改include下的arc.listview.class.php和arc.archives.class.php，两个文件的修改方法是一样的。打开文件，CTRL+F查找<li，把li标签一个一个地去掉（结束/li和带class的li都要去掉）。

    

   逐个去掉li的过程中，会发现这些序号中有的有A标签，有的没有只是纯文字或者数字。有A标签的是链接:如前一页，页号，后一页等；没A标签的是说 明：如当前页，页面统计等。如果有A标签的，就不用动他，如果没有A标签，就在它两边加上一个big标签（span也可以）。这样就会在pagelist 中分别生成A标记和big标记。如果不加big，没有A标签的说明序号或者统计就会出现排版错乱的问题。

    

    

    

    

    

    

    

    

    

    

    

   

    

   

    

    

3.  

4.  

    

   在CSS文件中，分别对pagelist ，pagelist   a和pgelist big添加属性。

    

   代码如下：

    

   .pagelist{
   width:580px;
   background-color:#fff;
   border-top:2px solid #e5e5e5;
   float:left;
   padding:10px;
   float:left;
   margin:10px 0px;
   }

    

   .pagelist a{
   padding:3px 8px;
   float:left;
   background:#2d2d2d;
   border:1px solid #7d7d7d;
   margin:2px;
   color:#ccc;
   }
   .pagelist big{
   padding:3px 8px;
   float:left;
   border:1px solid #e5e5e5;
   margin:2px;
   background:#f5f5f5;
   }

    

    

    

    

    

    

    

   

    

    

5.  

6.  

    

   打开\templets\default目录下的 list_article.htm文件

    

    

7.  

8.  

    

    

    

    

    

   

    

    

9.  

10.  

     

    保存更新，便可以看到下面的样子：

     

     

11.  

12.