ECShop H5微商城
ECShop APP商城
ECshop4.0商业授权
ECShop源码全能套餐
ECMall全能套餐(含主机)
ECMall3.0功能定制
ECShop商城小程序
ECShop二开定制
ECShop授权套餐
ECShop装修市场
ECMall基础套餐(PC+H5)
ECMall3.0商业授权
返回列表 发帖

[共享] ECSHOP团购列表美化-最新流行横版团购商品排列

ECSHOP默认的团购列表奇丑无法,一流资源网最近利用ECSHOP制作商城网站时,将团购列表美化了下:修改方法如下:
第一步:打开 group_buy_list.dwt 文件,使用以下代码替换此文件中的所有代码:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="Keywords" content="{$keywords}" />
  6. <meta name="Description" content="{$description}" />
  7. <!-- TemplateBeginEditable name="doctitle" -->
  8. <title>{$page_title}</title>
  9. <!-- TemplateEndEditable -->
  10. <!-- TemplateBeginEditable name="head" -->
  11. <!-- TemplateEndEditable -->
  12. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  13. <link rel="shortcut icon" href="favicon.ico" />
  14. <link rel="icon" href="animated_favicon.gif" type="image/gif" />
  15. <link href="{$ecs_css_path}" rel="stylesheet" type="text/css" />
  16. {* 包含脚本文件 *}
  17. {insert_scripts files='common.js'}
  18. <script type="text/javascript" src="js/action.js"></script>
  19.    
  20. </head>
  21. <body>
  22. <!-- #BeginLibraryItem "/library/page_header.lbi" --><!-- #EndLibraryItem -->
  23. <div class="block1">
  24. <!-- #BeginLibraryItem "/library/ur_here.lbi" --><!-- #EndLibraryItem -->
  25. </div>
  26. <div class="block1 clearfix">
  27.   <div id="pageLeft" class="fl">
  28.      <!-- TemplateBeginEditable name="左边区域" -->
  29.      <!-- #BeginLibraryItem "/library/category_tree.lbi" --><!-- #EndLibraryItem -->
  30.      <!-- #BeginLibraryItem "/library/promotion_info.lbi" --><!-- #EndLibraryItem -->
  31.      <!-- #BeginLibraryItem "/library/history.lbi" --><!-- #EndLibraryItem -->
  32.    <!-- TemplateEndEditable -->
  33.     </div>
  34.     <div id="pageRight" class="fr">
  35.       
  36.         <div class="goodsTitle">{$lang.group_buy_goods}</div>
  37.         <div class="grouplist clearfix">
  38.              <!-- {if $gb_list} 如果有团购活动 -->
  39.                 <!-- {foreach from=$gb_list item=group_buy} 循环团购活动开始 -->
  40.                 <div class="group_buy_listb clearfix">
  41. <div class="title"><a href="{$group_buy.url}" target="_blank">{$group_buy.goods_name|escape:html}</a></div>
  42.                     <div class="groupImg">
  43.                         <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>
  44.                     </div>
  45.     <div class="groucon">
  46.     <div class="grouconl">
  47. <div class="a">{$group_buy.formated_cur_price}</div>
  48.    
  49.     </div>
  50.     <div class="grouconr">
  51.         <p class="ckxq"><a href="{$group_buy.url}" target="_blank"></a></p>
  52.     </div>
  53.     </div>
  54.                 </div>
  55.                 <!--{/foreach}-->
  56.                 <!-- {else} -->
  57.                  <div class="tips">{$lang.group_goods_empty}</div>
  58.                 <!-- {/if} -->   
  59.     </div>
  60.     <!-- #BeginLibraryItem "/library/pages.lbi" --><!-- #EndLibraryItem -->
  61.     </div>
  62. </div>
  63.    
  64.    
  65. <!-- #BeginLibraryItem "/library/page_footer.lbi" --><!-- #EndLibraryItem -->
  66. </body>
  67. </html>
复制代码

CSS代码:
  1. .group_buy_listb {width:250px; float:left; margin:10px; padding:10px 20px;_padding:10px 19px; border:solid 1px #ddd}
  2. .group_buy_listb:hover {border:solid 1px #000}
  3. .group_buy_listb .title {width:250px; height:50px; line-height:20px; overflow:hidden; font-weight:bold}
  4. .group_buy_listb .title a {}
  5. .group_buy_listb .groupImg { width:250px; height:250px; overflow:hidden}
  6. .group_buy_listb .groupImg img {width:250px; height:250px}
  7. .group_buy_listb .groucon {width:250px; overflow:hidden}
  8. .group_buy_listb .grouconl {float:left; width:161px; height:60px; overflow:hidden}
  9. .group_buy_listb .grouconl .a {font-size:28px;font-weight: 700;font-family: verdana; color:#E5383A; width:161px; height:60px; line-height:60px}
  10. .group_buy_listb .grouconr {float:right; width:89px; height:60px; overflow:hidden}
  11. .group_buy_listb .grouconr .ckxq {width:89px; height:30px; background:url(./images/xqannui.jpg) no-repeat left top; margin-top:15px}
  12. .group_buy_listb .grouconr .ckxq a {display:block; width:89px; height:30px}
  13. .grouplist {padding: 12px 7px 10px 7px; background: #FFFFFF;}
复制代码

素材:



另外,我这里放弃了显示阶梯价格,而是直接调用了团购当前价格,所以还必须按修改一个文件,否则无法显示价格。

ECSHOP团购列表页调用显示当前价格教程:http://www.16css.com/ecshop/653.html


AD:史上最全ECSHOP教程技巧:http://www.16css.com/ecshop/

ECShop下载                             ECShop4.0商业授权

看着还不错的样子,顶一个

TOP

TOP

还行吧

TOP

谢谢分享
ECShop下载                             ECShop4.0商业授权

TOP

本帖最后由 白菜黄 于 2014-4-9 17:05 编辑

http://www.bb280.com中华养生网正需要这个呢

TOP

倍丽眼霜请问 我做过二次开发了。代码按你这样写行不行



会不会不行啊?




谢谢耐心指导

TOP

TOP

酷垦配件商城http://www.coolcomp.cn支持!

TOP

非常不错的这个模版
ECShop下载                             ECShop4.0商业授权

TOP

非常不错的这个模版,好样的
ECShop下载                             ECShop4.0商业授权

TOP

返回列表