Tutorial on using commodity template code of Tuoyuan JD store
<div class="j-module" module-function="autoLayout" module-param="{node:'li', spacingType:'margin', size:1}" > <ul> #foreach($!goods in $!goodsRecList) <li> <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" class="proimg" target="_blank"><img src="$!jshopCommon.getImage($!goods.imageurl,6)" alt="$!goods.wname" /></a> <a href="$!jshopProduct.getBuyUrl($!goods.goodsId)" class="proname" title="$!goods.wname" target="_blank">$! goods.wname</a> <span class="promarket">Reference price:<del>$! jshopPrice.getSalePrice($!{goods.goodsId})</del></span> <span class="proprice">¥<em>$! jshopPrice.getJdPrice($!goods.goodsId)</em></span> <a href="$! JshopProduct. getBuyUrl ($! Goods. goodsId)" class="probtn" target="_blank">Buy now</a> </li> #end </ul> </div>
.user-toyean { width:990px; margin:0 auto; background:#ba2a2a; overflow:hidden; } .user-toyean ul { margin-top:50px; padding:10px 0 0 9px; background:#a51b19; overflow:hidden; } .user-toyean ul li { width:200px!important; height:335px; margin:0 4px 7px 0!important; float:left; padding:0 20px!important; background:#fff; } .user-toyean ul li a.proimg { height:200px; margin-bottom:5px; padding-top:20px; text-align:center; display:block; } .user-toyean ul li .proimg img { width:200px; height:200px; vertical-align:top; } .user-toyean ul li .proname { width:200px; height:20px; margin-top:10px; font-size:14px; color:#000; line-height:20px; text-decoration:none; overflow:hidden; display:block; } .user-toyean ul li .promarket { font-size:13px; color:#999; line-height:18px; } .user-toyean ul li .proprice { height:30px; font-size:18px; color:#f75c57; font-family:Arial, Helvetica, sans-serif; font-weight:bold; line-height:30px; } .user-toyean ul li .proprice em { font-size:24px; font-style:normal; } .user-toyean ul li .probtn { width:200px; height:36px; font-size:20px; color:#fff; font-family:'Microsoft Yahei',simsun; font-weight:bold; line-height:36px; text-align:center; text-decoration:none; background:#f75c57; display:inline-block; }