ECSHOP默认的团购列表奇丑无法，CuoXin最近利用ECSHOP制作商城网站时，将团购列表美化了下：
第一步：打开 group_buy_list.dwt 文件，使用以下代码替换此文件中的所有代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Keywords" content="{$keywords}" /><meta name="Description" content="{$description}" /><!-- TemplateBeginEditable name="doctitle" --><title>{$page_title}</title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><link rel="shortcut icon" href="favicon.ico" /><link rel="icon" href="animated_favicon.gif" type="image/gif" /><link href="{$ecs_css_path}" rel="stylesheet" type="text/css" />{* 包含脚本文件 *}{insert_scripts files='common.js'}<script type="text/javascript" src="js/action.js"></script> </head><body><!-- #BeginLibraryItem "/library/page_header.lbi" --><!-- #EndLibraryItem --><div class="block1"><!-- #BeginLibraryItem "/library/ur_here.lbi" --><!-- #EndLibraryItem --></div><div class="block1 clearfix"> <div id="pageLeft" class="fl"> <!-- TemplateBeginEditable name="左边区域" --> <!-- #BeginLibraryItem "/library/category_tree.lbi" --><!-- #EndLibraryItem --> <!-- #BeginLibraryItem "/library/promotion_info.lbi" --><!-- #EndLibraryItem --> <!-- #BeginLibraryItem "/library/history.lbi" --><!-- #EndLibraryItem --> <!-- TemplateEndEditable --> </div> <div id="pageRight" class="fr"> <div class="goodsTitle">{$lang.group_buy_goods}</div> <div class="grouplist clearfix"> <!-- {if $gb_list} 如果有团购活动 --> <!-- {foreach from=$gb_list item=group_buy} 循环团购活动开始 --> <div class="group_buy_listb clearfix"><div class="title"><a href="{$group_buy.url}" target="_blank">{$group_buy.goods_name|escape:html}</a></div> <div class="groupImg"> <a href="{$group_buy.url}" target="_blank"><img src="{$group_buy.goods_thumb}" border="0" alt="{$group_buy.goods_name|escape:html}"width="250" height="250" /></a> </div> <div class="groucon"> <div class="grouconl"><div class="a">{$group_buy.formated_cur_price}</div> </div> <div class="grouconr"> <p class="ckxq"><a href="{$group_buy.url}" target="_blank"></a></p> </div> </div> </div> <!--{/foreach}--> <!-- {else} --> <div class="tips">{$lang.group_goods_empty}</div> <!-- {/if} --> </div> <!-- #BeginLibraryItem "/library/pages.lbi" --><!-- #EndLibraryItem --> </div></div> <!-- #BeginLibraryItem "/library/page_footer.lbi" --><!-- #EndLibraryItem --></body></html> |
CSS代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .group_buy_listb {width:250px; float:left; margin:10px; padding:10px20px;_padding:10px 19px; border:solid 1px #ddd}.group_buy_listb:hover {border:solid 1px #000}.group_buy_listb .title {width:250px; height:50px; line-height:20px;overflow:hidden; font-weight:bold}.group_buy_listb .title a {}.group_buy_listb .groupImg { width:250px; height:250px; overflow:hidden}.group_buy_listb .groupImg img {width:250px; height:250px}.group_buy_listb .groucon {width:250px; overflow:hidden}.group_buy_listb .grouconl {float:left; width:161px; height:60px; overflow:hidden}.group_buy_listb .grouconl .a {font-size:28px;font-weight: 700;font-family:verdana; color:#E5383A; width:161px; height:60px; line-height:60px}.group_buy_listb .grouconr {float:right; width:89px; height:60px; overflow:hidden}.group_buy_listb .grouconr .ckxq {width:89px; height:30px;background:url(./images/xqannui.jpg) no-repeat left top; margin-top:15px}.group_buy_listb .grouconr .ckxq a {display:block; width:89px; height:30px}.grouplist {padding: 12px 7px 10px 7px; background: #FFFFFF;} |
另外，我这里放弃了显示阶梯价格，而是直接调用了团购当前价格，所以还必须按修改一个文件，否则无法显示价格。
新闻热点
疑难解答
