关于Jshop商品推荐自定义模板设置，仅供参考
详细操作请查看附件图片：
相关代码如下：
CSS内容：
此代码仅供参考，css部分可能存在冗余，未经优化，谨慎试用。
相关代码如下：
请注意 模版内容 html 部分 的 foreach 和 end 前面有 # 号模板内容：
由于编辑器原因，未能显示，注意添加
<div class="j-module" module-function="autoLayout" module-param="{spacingType:'margin', size:0.5}" style="background:#fff9f1;">
<ul class="user_bli" >
foreach($!goods in $!goodsRecList)
<li>
<div class="jItem">
<div class="jHot"><img src="http://img14.360buyimg.com/cms/g9/M03/11/13/rBEHalDcBSMIAAAAAAAJm1gGr7gAADcKwJmSKwAAAmz409.png"/></div>
<div class="jPic">
<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">
<img src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname" height="200" width="200" />
</a>
</div>
<div class="jGoodsInfo">
<div class="jDesc" title="$!goods.wname $!goods.advertWord">
<a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" target="_blank">$!goods.wname</a>
</div>
<div class="jPrice">
<div class="jdPrice">
<span class="jRmb">￥</span>
$!jshopPrice.getJdPrice($!goods.goodsId)
</div>
<div class="jSalePrice">
<span class="jRmb">￥</span>$!jshopPrice.getSalePrice($!goods.goodsId)
</div>
</div>
</div>
<div class="jBtn">
<a target="_blank" href="$!jshopCommon.addCart($!goods.goodsId)">
<img src="http://img11.360buyimg.com/cms/g9/M03/11/13/rBEHalDcBSIIAAAAAAAVPwJRvgEAADcKwJfOgYAABVX750.png" />
</a>
</div>
</div>
</li>
end
</ul>
</div>CSS内容：
.user_bli ,.user_bli li{padding:0px;margin:0px;}
.user_bli {list-style:none;padding-top:10px;}
.user_bli li{list-style-type:none;}
.user_bli li{background:url(http://img10.360buyimg.com/cms/g8/M03/11/13/rBEHZ1DcBR8IAAAAAAAHseCf2DAAADcKwNuYNEAAAfJ920.png) no-repeat; width:225px;height:370px;display:block;overflow:hidden;float:left;}
.user_bli li .jItem {width:238px;height:360px;overflow:hidden;display:block;}
.user_bli li .jItem .jHot{position: relative;z-index: 1;height: 60px;width: 61px;top: 0px;right: 0px;float:right;}
.user_bli li .jItem .jPic{z-index:0;position:relative;top:-20px;left:18px;float:left;width:202px;height:202px;}
.user_bli li .jItem .jPic:hover img{border:1px solid #ff0000;}
.user_bli li .jItem .jPic img{border:1px solid #eeeee;display:block;width:200px;height:200px;}
.user_bli li .jGoodsInfo{width:222px;height:85px;display:block;overflow:hidden;margin-top:75px;padding:5px;font-size:14px;clear:both;}
.user_bli li .jGoodsInfo .jDesc{width:222px;height:38px; color:#272727;padding:1px;margin-top:5px;}
.user_bli li .jGoodsInfo .jDesc a{color: #272727;text-decoration:none;font-weight:bold;}
.user_bli li .jGoodsInfo .jDesc a:hover{color: red;}.user_bli li .jGoodsInfo .jPrice {margin-top:10px;}
.user_bli li .jGoodsInfo .jPrice .jText{width:45px;height:30px;display:block;float:left;}
.user_bli li .jGoodsInfo .jPrice .jRmb{width:12px;height:10px;display:block;float:left;}
.user_bli li .jGoodsInfo .jPrice .jSalePrice{text-decoration: line-through;}
.user_bli li .jGoodsInfo .jdPrice{font-size:24px;color:red;font-weight:bold;}
.user_bli li .jGoodsInfo .jdPrice .jRmb{font-size:14px;width:15px;height:10px;display:block;float:left;line-height:32px;}
.user_bli li .jBtn{position:relative;width:133px;height:32px;float:right;bottom:30px;right:10px;}
.user_bli li .jBtn img{border:0;display:block;}此代码仅供参考，css部分可能存在冗余，未经优化，谨慎试用。
0
群群 - 二把刀
预览正常，发布之后文字超出叠加的处理：
修改css：
修改css：
.user_bli li .jGoodsInfo .jDesc a{color: #272727;text-decoration:none;font-weight:bold;width222px;height:38px;display:block;overflow:hidden;} 
0
吴依依 - 设计自己的人生...
.user_bli li .jGoodsInfo .jDesc a{color: #272727;text-decoration:none;font-weight:bold;width222px;height:38px;display:block;overflow:hidden;}
看不懂 修改哪里的，换句话说 替换模板内容那个位置的？
看不懂 修改哪里的，换句话说 替换模板内容那个位置的？
0
群群 - 二把刀
各位在使用的时候可能图片清晰度不够，
修改的地方是这里：
<img src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname" height="200" width="200" />
找到这句 $!jshopCommon.getImage($!goods.imageurl,2)
修改里面的数字 2 ，
可选值：
1(350350)、2(160160)、3(130130)、4(100100)、5(5050)、6(240240)
1-6 对应不同尺寸，这里我更改为数字6 即可，
修改的地方是这里：
<img src="$!jshopCommon.getImage($!goods.imageurl,2)" alt="$!goods.wname" height="200" width="200" />
找到这句 $!jshopCommon.getImage($!goods.imageurl,2)
修改里面的数字 2 ，
可选值：
1(350350)、2(160160)、3(130130)、4(100100)、5(5050)、6(240240)
1-6 对应不同尺寸，这里我更改为数字6 即可，
0
樱花雪 - 理解万岁
css里面
width:225px;height:370px;display:block;overflow:hidden;float:left;}
.user_bli li .jItem {width:238px;height:360px;overflow:hidden;display:block;}
这里width:225px;height:370px; 是说的哪里的宽度和高度
width:225px;height:370px;display:block;overflow:hidden;float:left;}
.user_bli li .jItem {width:238px;height:360px;overflow:hidden;display:block;}
这里width:225px;height:370px; 是说的哪里的宽度和高度
RSS Feed