商品推荐自定义模版

原问题： http://www.jdcss.com/?/question/13

更改了部分样式和调用，适应新版页面：

注意页面中 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;}