当前位置:首页 > 教程中心 > CMS教程 > EcShop

新版横版美化ECSHOP团购模板下载

所属栏目:EcShop 时间:2014-02-22 来源:网络 作者:不详 点击:

ECSHOP默认的团购列表奇丑无法,一流资源网最近利用ECSHOP制作商城网站时,将团购列表美化了下:



修改方法如下:

第一步:打开 group_buy_list.dwt 文件,使用以下代码替换此文件中的所有代码:

<!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代码:

.group_buy_listb {width:250px; float:left; margin:10px; padding:10px 20px;_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;}
素材:



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

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

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

你应该也喜欢这些吧

共有 0 条评论

给个评价吧

验证码: