商品推荐自定义模版
原问题: http://www.jdcss.com/?/question/13
更改了部分样式和调用,适应新版页面:
模版内容
css 内容:
更改了部分样式和调用,适应新版页面:
注意页面中 foreach 和 end 前面有# 符号Css ID:user_bli
由于编辑器原因未能显示,在使用模版的时候注意添加
模版内容
<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="//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,6)" 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="//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(//img10.360buyimg.com/cms/g8/M03/11/13/rBEHZ1DcBR8IAAAAAAAHseCf2DAAADcKwNuYNEAAAfJ920.png) no-repeat; width:238px;height:370px;display:block;overflow:hidden;float:left;margin-right:9px;margin-bottom:10px;}
.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:-35px;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:34px; color:#272727;padding:1px;margin-top:5px;overflow:hidden}
.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;}