如何修改ecshop商品列表页分页样式

Posted on 2013-12-23 15:29  anyongchao  阅读(1880)  评论(0)    收藏  举报

ecshop商品列表分页有2种样式,通过后台可以选择。

可以通过以下方式修改列表分页样式

一、分页html代码

分页代码在library/pages.lb里

<div class="page_out">
<div id="pager">
  {$lang.pager_1}{$pager.record_count}{$lang.pager_2}{$lang.pager_3}{$pager.page_count}{$lang.pager_4} <span> <a href="{$pager.page_first}">{$lang.page_first}</a> <a href="{$pager.page_prev}">{$lang.page_prev}</a> <a href="{$pager.page_next}">{$lang.page_next}</a> <a href="{$pager.page_last}">{$lang.page_last}</a> </span>
    <!--{foreach from=$pager.search key=key item=item}-->
      {if $key eq 'keywords'}
          <input type="hidden" name="{$key}" value="{$item|escape:decode_url}" />
        {else}
          <input type="hidden" name="{$key}" value="{$item}" />
      {/if}
    <!--{/foreach}-->
    < name="page" id="page" onchange="Page(this)">
    {html_options options=$pager.array ed=$pager.page}
    </>
</div>
</div>

二、分页样式

/*翻页*/
   .page_out{border:1px solid #B8D8EB; border-bottom:none; background:url(images/tree_bg.gif) repeat-xtop; height:29px; line-height:29px; padding-left:10px; color:#03589E;}
   .pagebar{ float:right}
   .pagebar img{position:relative; top:2px;}
   .pagebar a{display:block; float:left; margin:0 2px; color:#0066cc; text-decoration:none;}
   .pagebar a:hover{color:#ff5a6a; text-decoration:none;}
   .pagebar .page_now{display:block; float:left; margin:0 5px; color:#ff5a6a; font-weight:bold;}
   #pager a{color:#0066cc; text-decoration:none;}

/*好的分页样式修改需要结合html代码和css做修改*/