ECSHOP在线手册布局参考图--商品分类页 category.dwt

A.购物车

1,设置方法

程序自动读取购物车的商品数量

2,代码相关

cart.lbi 中
{insert_scripts files='transport.js'}
<div class="cart" id="ECS_CARTINFO">
{insert name='cart_info'}
</div>
<div class="blank5"></div>

3,相关css

style.css 中 /*购物车*/
.cart{background:url(images/catBg.gif) no-repeat left top; padding:15px 10px 15px 50px;
color:#006bcd; height:50px; _padding:12px 10px 15px 50px;
}
.cart a{color:#006bcd; text-decoration:none;}
.cart a:hover{color:#006bcd; text-decoration:underline;}

B.商品分类树

1,设置方法

可以在后台

商店管理-商品分类

里修改

详细教程：http://www.ecmoban.com/article-1688.html

2,代码相关

category_tree.lbi 中
<div class="box">
<div class="box_1">
<div id="category_tree">
<!--{foreach from=$categories item=cat}-->
<dl>
<dt><a href="{$cat.url}">{$cat.name|escape:html}</a></dt>
<!--{foreach from=$cat.cat_id item=child}-->
<dd><a href="{$child.url}">{$child.name|escape:html}</a></dd>
<!--{foreach from=$child.cat_id item=childer}-->
<dd>  <a href="{$childer.url}">{$childer.name|escape:html}</a></dd>
<!--{/foreach}-->
<!--{/foreach}-->

</dl>
<!--{/foreach}-->
</div>
</div>
</div>
<div class="blank5"></div>

3,相关css

style.css 中 /*商品分类*/
#category_tree{border:4px solid #f1faff; background-color:#fff;}
#category_tree dl{margin:6px;}
#category_tree dt{background:url(images/lineBg.gif) repeat-x left bottom;
color:#3f3f3f; padding:2px 0 3px 12px;
}
#category_tree dt a{background:url(images/bg.gif) no-repeat 0 -69px;
color:#3f3f3f; padding-left:15px; text-decoration:none;
}
#category_tree dd{padding:3px 0 3px 10px;}
#category_tree dd a{color:#404040; text-decoration:none;}
#category_tree dd a:hover{color:#ff6600; text-decoration:none;}

C.浏览历史记录

1,设置方法

自动调用已经浏览的过的商品

2,代码相关

history.lbi 中 <div class="box" id='history_div'>
<div class="box_1">
<h3><span>{$lang.view_history}</span></h3>
<div class="boxCenterList clearfix" id='history_list'>
{insert name='history'}
</div>
</div>
</div>
<div class="blank5"></div>
<script type="text/javascript">
if (document.getElementById('history_list').innerHTML.replace(/\s/g,'').length<1)
{
document.getElementById('history_div').style.display='none';
}
else
{
document.getElementById('history_div').style.display='block';
}
function clear_history()
{
Ajax.call('user.php', 'act=clear_history',clear_history_Response, 'GET', 'TEXT',1,1);
}
function clear_history_Response(res)
{
document.getElementById('history_list').innerHTML = '{$lang.no_history}';
}
</script>
includes/lib_insert.php 中（这个比较特殊，需要在程序里修改） $str.='<ul class="clearfix"><li class="goodsimg"><a href="'.$goods['url'].'" target="_blank"><img src="'.$goods['goods_thumb'].'" alt="'.$goods['goods_name'].'" class="B_blue" /></a></li><li><a href="'.$goods['url'].'" target="_blank" title="'.$goods['goods_name'].'">'.$goods['short_name'].'</a><br />'.$GLOBALS['_LANG']['shop_price'].'<font class="f1">'.$goods['shop_price'].'</font><br /></li></ul>';
}
$str .= '<ul id="clear_history"><a onclick="clear_history()">' . $GLOBALS['_LANG']['clear_history'] . '</a></ul>';

3,相关css

style.css 中 /*相关商品*/
.boxCenterList ul{height:1%; margin-bottom:5px;}
.boxCenterList li{float:left; width:120px;}
.boxCenterList li.goodsimg{width:48px; margin-right:10px;}
.boxCenterList li.goodsimg img{width:48px; height:48px; display:block;}
/*浏览历史，收藏*/
#history li{width:100%;}
#clear_history a{background:none; padding:0px; color:#3f3f3f; text-decoration:none;float:right;cursor:pointer;}

D.商品筛选区

1,设置方法

可以在后台

商品类型-商品属性

里先设置筛选属性

之后在

商品管理-商品属性

里添加

详细说明可以参考：http://www.ecmoban.com/article-1495.html

2,代码相关

category.dwt 中
<!--组合搜索 开始-->
<!--{if $brands.1 || $price_grade.1 || $filter_attr_list}-->
<div class="box">
<div class="box_1">
<h3><span>{$lang.goods_filter}</span></h3>
<!--{if $brands.1}-->
<div class="screeBox">
<strong>{$lang.brand}：</strong>
<!--{foreach from=$brands item=brand}-->
<!-- {if $brand.selected} -->
<span>{$brand.brand_name}</span>
<!-- {else} -->
<a href="{$brand.url}">{$brand.brand_name}</a> 
<!-- {/if} -->
<!--{/foreach}-->
</div>
<!--{/if}-->
<!--{if $price_grade.1}-->
<div class="screeBox">
<strong>{$lang.price}：</strong>
<!--{foreach from=$price_grade item=grade}-->
<!-- {if $grade.selected} -->
<span>{$grade.price_range}</span>
<!-- {else} -->
<a href="{$grade.url}">{$grade.price_range}</a> 
<!-- {/if} -->
<!--{/foreach}-->
</div>
<!--{/if}-->
<!--{foreach from=$filter_attr_list item=filter_attr}-->
<div class="screeBox">
<strong>{$filter_attr.filter_attr_name|escape:html} :</strong>
<!--{foreach from=$filter_attr.attr_list item=attr}-->
<!-- {if $attr.selected} -->
<span>{$attr.attr_value}</span>
<!-- {else} -->
<a href="{$attr.url}">{$attr.attr_value}</a> 
<!-- {/if} -->
<!--{/foreach}-->
</div>
<!--{/foreach}-->
</div>
</div>
<div class="blank5"></div>
<!-- {/if} -->
<!--组合搜索 结束-->

3,相关css

style.css 中 /*属性组合搜索*/
.screeBox{padding:10px;}
.screeBox a{color:#404040;}
.screeBox span{background:#91d3f7; padding:3px 5px; margin:0 3px;}

E.分类页精品区

1,设置方法

与首页的精品商品一样，

商品管理-商品列表

里勾选精品

之后这里调用的是此分类下的精品商品

2,代码相关

recommend_best.lbi 中
<!-- {if $best_goods} -->
<!-- {if $cat_rec_sign neq 1} -->
<div class="box">
<div class="box_2 centerPadd">
<div class="itemTit" id="itemBest">
{if $cat_rec[1]}
<h2><a href="javascript:void(0)" onclick="change_tab_style('itemBest', 'h2', this);get_cat_recommend(1, 0);">{$lang.all_goods}</a></h2>
{foreach from=$cat_rec[1] item=rec_data}
<h2 class="h2bg"><a href="javascript:void(0)" onclick="change_tab_style('itemBest', 'h2', this);get_cat_recommend(1, {$rec_data.cat_id})">{$rec_data.cat_name}</a></h2>
{/foreach}
{/if}
</div>
<div id="show_best_area" class="clearfix goodsBox">
<!-- {/if} -->
<!--{foreach from=$best_goods item=goods}-->
<div class="goodsItem">
<span class="best"></span>
<a href="{$goods.url}"><img src="{$goods.thumb}" alt="{$goods.name|escape:html}" class="goodsimg" /></a><br />
<p><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.short_style_name}</a></p>
<font class="f1">
<!-- {if $goods.promote_price neq ""} -->
{$goods.promote_price}
<!-- {else}-->
{$goods.shop_price}
<!--{/if}-->
</font>
</div>
<!--{/foreach}-->
<div class="more"><a href="../search.php?intro=best"><img src="data:images/more.gif" /></a></div>
<!-- {if $cat_rec_sign neq 1} -->
</div>
</div>
</div>
<div class="blank5"></div>
<!-- {/if} -->
<!-- {/if} -->

3,相关css

style.css 中 /*精品推荐，新品上市，热卖商品*/
.centerPadd{padding:5px 8px 8px 8px; overflow:hidden;}
.itemTit{height:30px; background:url(images/bg.gif) no-repeat 0px -195px; padding-left:190px; text-align:right;
/*margin-bottom:-3px; _margin-bottom:-2px;*/
}
.itemTit.New{background:url(images/bg.gif) no-repeat 0px -225px;}
.itemTit.Hot{background:url(images/bg.gif) no-repeat 0px -256px;}
.itemTit img{position:relative; top:7px;}
.itemTit h2{float:left; height:27px; background:url(images/itemH2Bg.gif) repeat-x left top; border:1px solid #d6ecff;
font-size:12px; text-align:center; color:#3f3f3f; font-weight:100; padding:0px 10px; line-height:28px; margin:0 6px 0 0;
border-bottom:none; position:relative; bottom:-3px; display:inline; white-space:nowrap;
}
.itemTit h2 a{color:#3f3f3f; text-decoration:none;}
.itemTit .h2bg{height:27px; line-height:28px; border:none; background:none;
font-size:12px; text-align:center; color:#006ace; font-weight:100; padding:0px 10px;
display:inline; white-space:nowrap;
}
.itemTit .h2bg a{color:#006ace; text-decoration:none;}
.centerPadd .goodsBox{border:1px solid #d6ecff; background:#fff; padding:12px 0px 0px 17px; *padding:12px 0px 0px 17px;
_padding:12px 0px 0px 0px;}
.centerPadd .goodsBox .more{text-align:right; clear:both; margin:0 8px 8px 0;}
/*单个商品*/
.goodsItem{width:110px; float:left; position:relative; overflow:hidden; margin:0px 14px 15px 14px;}
.goodsItem .goodsimg{width:100px; height:100px; border:4px solid #eef8ff; margin-bottom:4px;}
.goodsItem img{width:52px; height:17px;}
.goodsItem p{text-align:left; color:#3f3f3f;}
.goodsItem p a{color:#3f3f3f; text-decoration:none;}
.goodsItem p a:hover{color:#ff6600; text-decoration:none;}
.goodsItem span{width:40px; height:40px; position:absolute;left:0px; top:0px;}
.goodsItem span.best{background:url(images/bg.gif) no-repeat 0px -304px;}
.goodsItem span.news{background:url(images/bg.gif) no-repeat -75px -304px;}
.goodsItem span.hot{background:url(images/bg.gif) no-repeat -161px -304px;}

F.商品列表排序展示区

1,设置方法

此功能为程序自带

2,代码相关

goods_list.lbi中 <h3>
<span>{$lang.goods_list}</span><a name='goods_list'></a>
<form method="GET" class="sort" name="listform">
{$lang.btn_display}：
<a href="javascript:;" onClick="javascript:display_mode('list')"><img src="data:images/display_mode_list<!-- {if $pager.display == 'list'} -->_act<!-- {/if} -->.gif" alt="{$lang.display.list}"></a>
<a href="javascript:;" onClick="javascript:display_mode('grid')"><img src="data:images/display_mode_grid<!-- {if $pager.display == 'grid'} -->_act<!-- {/if} -->.gif" alt="{$lang.display.grid}"></a>
<a href="javascript:;" onClick="javascript:display_mode('text')"><img src="data:images/display_mode_text<!-- {if $pager.display == 'text'} -->_act<!-- {/if} -->.gif" alt="{$lang.display.text}"></a>

<a href="{$script_name}.php?category={$category}&display={$pager.display}&brand={$brand_id}&price_min={$price_min}&price_max={$price_max}&filter_attr={$filter_attr}&page={$pager.page}&sort=goods_id&order=<!-- {if $pager.sort == 'goods_id' && $pager.order == 'DESC'} -->ASC<!-- {else} -->DESC<!-- {/if} -->#goods_list"><img src="data:images/goods_id_<!-- {if $pager.sort == 'goods_id'} -->{$pager.order}<!-- {else} -->default<!-- {/if} -->.gif" alt="{$lang.sort.goods_id}"></a>
<a href="{$script_name}.php?category={$category}&display={$pager.display}&brand={$brand_id}&price_min={$price_min}&price_max={$price_max}&filter_attr={$filter_attr}&page={$pager.page}&sort=shop_price&order=<!-- {if $pager.sort == 'shop_price' && $pager.order == 'ASC'} -->DESC<!-- {else} -->ASC<!-- {/if} -->#goods_list"><img src="data:images/shop_price_<!-- {if $pager.sort == 'shop_price'} -->{$pager.order}<!-- {else} -->default<!-- {/if} -->.gif" alt="{$lang.sort.shop_price}"></a>
<a href="{$script_name}.php?category={$category}&display={$pager.display}&brand={$brand_id}&price_min={$price_min}&price_max={$price_max}&filter_attr={$filter_attr}&page={$pager.page}&sort=last_update&order=<!-- {if $pager.sort == 'last_update' && $pager.order == 'DESC'} -->ASC<!-- {else} -->DESC<!-- {/if} -->#goods_list"><img src="data:images/last_update_<!-- {if $pager.sort == 'last_update'} -->{$pager.order}<!-- {else} -->default<!-- {/if} -->.gif" alt="{$lang.sort.last_update}"></a>

<input type="hidden" name="category" value="{$category}" />
<input type="hidden" name="display" value="{$pager.display}" id="display" />
<input type="hidden" name="brand" value="{$brand_id}" />
<input type="hidden" name="price_min" value="{$price_min}" />
<input type="hidden" name="price_max" value="{$price_max}" />
<input type="hidden" name="filter_attr" value="{$filter_attr}" />
<input type="hidden" name="page" value="{$pager.page}" />
<input type="hidden" name="sort" value="{$pager.sort}" />
<input type="hidden" name="order" value="{$pager.order}" />
</form>
</h3>

3,相关css

style.css 中 h3{height:33px; line-height:33px; font-size:12px; background:url(images/h3title.gif) repeat-x left top; text-align:right;
padding:0 12px; font-weight:100;
}
h3.border{border:1px solid #c5e4ff; border-bottom:none;}
h3 img{position:relative; top:7px;}
h3 span{float:left; background:url(images/bg.gif) no-repeat 0px -570px;width:auto; height:33px; line-height:33px; text-align:left;
font-weight:bold; color:#56a5ee; padding-left:12px;}
.sort a{ position:relative; bottom:5px;}
.sort input{position:relative; top:3px;}

G.商品列表

1,设置方法

默认功能，自动调用该分类下的所有商品

商品列表区域有三种效果

goods_list.lbi 中（注意这段代码里的几个if语句，分别是三种显示方式的不同情况）
<form name="compareForm" action="compare.php" method="post" onSubmit="return compareGoods(this);">
<!-- {/if} -->
<!-- {if $pager.display == 'list'} -->
<div class="goodsList">
<!--{foreach name=goods_list from=$goods_list item=goods}-->
<!--{if $smarty.foreach.goods_list.index mod 2 eq 0}-->id=""<!--{else}-->id="bgcolor"<!--{/if}-->>
<ul class="clearfix bgcolor"<!--{if $smarty.foreach.goods_list.index mod 2 eq 0}-->id=""<!--{else}-->id="bgcolor"<!--{/if}-->>
<li>
<br>
<a href="javascript:;" id="compareLink" onClick="Compare.add({$goods.goods_id},'{$goods.goods_name|escape:"html"}','{$goods.type}')" class="f6">比较</a>
</li>
<li class="thumb"><a href="{$goods.url}"><img src="{$goods.goods_thumb}" alt="{$goods.goods_name}" /></a></li>
<li class="goodsName">
<a href="{$goods.url}" class="f6">
<!-- {if $goods.goods_style_name} -->
{$goods.goods_style_name}<br />
<!-- {else} -->
{$goods.goods_name}<br />
<!-- {/if} -->
</a>
<!-- {if $goods.goods_brief} -->
{$lang.goods_brief}{$goods.goods_brief}<br />
<!-- {/if} -->
</li>
<li>
<!-- {if $show_marketprice} -->
{$lang.market_price}<font class="market">{$goods.market_price}</font><br />
<!-- {/if} -->
<!--{if $goods.promote_price neq "" } -->
{$lang.promote_price}<font class="shop">{$goods.promote_price}</font><br />
<!--{else}-->
{$lang.shop_price}<font class="shop">{$goods.shop_price}</font><br />
<!--{/if}-->
</li>
<li class="action">
<a href="javascript:collect({$goods.goods_id});" class="abg f6">{$lang.favourable_goods}</a>
<a href="javascript:addToCart({$goods.goods_id})"><img src="../images/bnt_buy_1.gif"></a>
</li>
</ul>
<!--{/foreach}-->
</div>
<!-- {elseif $pager.display == 'grid'} -->
<div class="centerPadd">
<div class="clearfix goodsBox" style="border:none;">
<!--{foreach from=$goods_list item=goods}-->
<!-- {if $goods.goods_id} -->
<div class="goodsItem">
<a href="{$goods.url}"><img src="{$goods.goods_thumb}" alt="{$goods.goods_name}" class="goodsimg" /></a><br />
<p><a href="{$goods.url}" title="{$goods.name|escape:html}">{$goods.goods_name}</a></p>
<!-- {if $show_marketprice} -->
{$lang.market_prices}<font class="market_s">{$goods.market_price}</font><br />
<!-- {/if} -->
<!--{if $goods.promote_price neq "" } -->
{$lang.promote_price}<font class="shop_s">{$goods.promote_price}</font><br />
<!--{else}-->
{$lang.shop_prices}<font class="shop_s">{$goods.shop_price}</font><br />
<!--{/if}-->
<a href="javascript:collect({$goods.goods_id});" class="f6">{$lang.btn_collect}</a> |
<a href="javascript:addToCart({$goods.goods_id})" class="f6">{$lang.btn_buy}</a> |
<a href="javascript:;" id="compareLink" onClick="Compare.add({$goods.goods_id},'{$goods.goods_name|escape:"html"}','{$goods.type}')" class="f6">{$lang.compare}</a>
</div>
<!--{/if}-->
<!--{/foreach}-->
</div>
</div>
<!-- {elseif $pager.display == 'text'} -->
<div class="goodsList">
<!--{foreach from=$goods_list item=goods}-->
<!--{if $smarty.foreach.goods_list.index mod 2 eq 0}-->id=""<!--{else}-->id="bgcolor"<!--{/if}-->>
<ul class="clearfix bgcolor"<!--{if $smarty.foreach.goods_list.index mod 2 eq 0}-->id=""<!--{else}-->id="bgcolor"<!--{/if}-->>
<li style="margin-right:15px;">
<a href="javascript:;" id="compareLink" onClick="Compare.add({$goods.goods_id},'{$goods.goods_name|escape:"html"}','{$goods.type}')" class="f6">{$lang.compare}</a>
</li>
<li class="goodsName">
<a href="{$goods.url}" class="f6 f5">
<!-- {if $goods.goods_style_name} -->
{$goods.goods_style_name}<br />
<!-- {else} -->
{$goods.goods_name}<br />
<!-- {/if} -->
</a>
<!-- {if $goods.goods_brief} -->
{$lang.goods_brief}{$goods.goods_brief}<br />
<!-- {/if} -->
</li>
<li>
<!-- {if $show_marketprice} -->
{$lang.market_price}<font class="market">{$goods.market_price}</font><br />
<!-- {/if} -->
<!--{if $goods.promote_price neq "" } -->
{$lang.promote_price}<font class="shop">{$goods.promote_price}</font><br />
<!--{else}-->
{$lang.shop_price}<font class="shop">{$goods.shop_price}</font><br />
<!--{/if}-->
</li>
<li class="action">
<a href="javascript:collect({$goods.goods_id});" class="abg f6">{$lang.favourable_goods}</a>
<a href="javascript:addToCart({$goods.goods_id})"><img src="../images/bnt_buy_1.gif"></a>
</li>
</ul>
<!--{/foreach}-->
</div>
<!-- {/if} -->
<!-- {if $category > 0} -->
</form>

3,相关css

style.css 中 .centerPadd .goodsBox{border:1px solid #d6ecff; background:#fff; padding:12px 0px 0px 17px; *padding:12px 0px 0px 17px;
_padding:12px 0px 0px 0px;}
.centerPadd .goodsBox .more{text-align:right; clear:both; margin:0 8px 8px 0;}
/*单个商品*/
.goodsItem{width:110px; float:left; position:relative; overflow:hidden; margin:0px 14px 15px 14px;}
.goodsItem .goodsimg{width:100px; height:100px; border:4px solid #eef8ff; margin-bottom:4px;}
.goodsItem img{width:52px; height:17px;}
.goodsItem p{text-align:left; color:#3f3f3f;}
.goodsItem p a{color:#3f3f3f; text-decoration:none;}
.goodsItem p a:hover{color:#ff6600; text-decoration:none;}
.goodsItem span{width:40px; height:40px; position:absolute;left:0px; top:0px;}
.goodsItem span.best{background:url(images/bg.gif) no-repeat 0px -304px;}
.goodsItem span.news{background:url(images/bg.gif) no-repeat -75px -304px;}
.goodsItem span.hot{background:url(images/bg.gif) no-repeat -161px -304px;}
/*商品列表显示方式*/
.goodsList{ padding:10px 10px 0 10px;}
.goodsList ul{ margin-bottom:10px;}
.goodsList ul#bgcolor{background:#fbfbfb; border-top:1px dashed #e8e8e8; border-bottom:1px dashed #e8e8e8;}
.goodsList li{float:left; padding-top:8px;}
.goodsList li.thumb{width:80px; text-align:center;}
.goodsList li.thumb img{width:50px; height:50px; border:1px solid #ccc; padding:1px;}
.goodsList li.goodsName{width:290px; margin-right:10px;}
.goodsList li.action{float:right; margin-left:10px;}
.goodsList li.action a.abg{background:url(images/bg.gif) no-repeat 0px -735px; padding-left:18px; position:relative; bottom:5px;}

H.页码区

1,设置方法

程序自带的分页效果,样式有两种,可以在后台

商店设置-显示设置

里选择

2,代码相关

pages.lbi 中
<!--翻页 start-->
<form name="selectPageForm" action="{$smarty.server.PHP_SELF}" method="get">
<!-- {if $pager.styleid eq 0 } -->
<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}-->
<select name="page" id="page" onchange="selectPage(this)">
{html_options options=$pager.array selected=$pager.page}
</select>
</div>
<!--{else}-->

<!--翻页 start-->
<div id="pager" class="pagebar">
<span class="f_l f6" style="margin-right:10px;">{$lang.pager_1}<b>{$pager.record_count}</b> {$lang.pager_2}</span>
<!-- {if $pager.page_first} --><a href="{$pager.page_first}">{$lang.page_first} ...</a><!-- {/if} -->
<!-- {if $pager.page_prev} --><a class="prev" href="{$pager.page_prev}">{$lang.page_prev}</a><!-- {/if} -->
<!-- {if $pager.page_count neq 1} -->
<!--{foreach from=$pager.page_number key=key item=item}-->
<!-- {if $pager.page eq $key} -->
<span class="page_now">{$key}</span>
<!-- {else} -->
<a href="{$item}">[{$key}]</a>
<!-- {/if} -->
<!--{/foreach}-->
<!-- {/if} -->

<!-- {if $pager.page_next} --><a class="next" href="{$pager.page_next}">{$lang.page_next}</a><!-- {/if} -->
<!-- {if $pager.page_last} --><a class="last" href="{$pager.page_last}">...{$lang.page_last}</a><!-- {/if} -->
<!-- {if $pager.page_kbd} -->
<!--{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}-->
<kbd style="float:left; margin-left:8px; position:relative; bottom:3px;"><input type="text" name="page" onkeydown="if(event.keyCode==13)selectPage(this)" size="3" class="B_blue" /></kbd>
<!-- {/if} -->
</div>
<!--翻页 END-->

<!-- {/if} -->
</form>
<script type="Text/Javascript" language="JavaScript">
<!--
{literal}
function selectPage(sel)
{
sel.form.submit();
}
{/literal}
//-->
</script>

3,相关css

style.css 中 /*翻页*/
.pagebar{height:20px; 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; background:#fff;}
#pager a{color:#0066cc; text-decoration:none;}