it618插件DIY调用横向排版示例

横线以下是DIY调用代码    下面代码这部分 <style>样式</style>  这代码是it618积分商城默认的例子 别的插件也可以参考的
--------------------------------------------------------------------------------------------------------------------

1. <style>
   
2. .jf_main *{margin:0;padding:0;}
   
3. .jf_main{ background:#fff; overflow:hidden; border:#dfdfdf 1px solid;margin-top:10px;margin-bottom:10px }
   
4. .jf_main_hd .title{ font-size:16px; line-height:1; font-weight:500; font-family:"microsoft yahei"; padding-left:10px; margin-top:19px; border-left:#ff6600 3px solid; height:17px}
   
5. .jf_main_hd .title span{ color:#999; font-size:12px; padding-left:10px;}
   
6. .jf_main_hd{ padding:0 19px; overflow:hidden;zoom:1;}
   
7. .jf_main_bd{ padding:0 19px 19px;zoom:1;}
   
8. .jf_select_bar{ height:25px; float:right; padding-top:15px; }
   
9. .jf_select_bar .page{ float:left; line-height:25px; }
   
10. .jf_select_bar .glb_graybtn_s, .jf_select_bar .glb_graybtn_dis{ float:left; display:inline; margin-left:10px;}
    
11. .jf_select_bar .glb_graybtn_dis span{ color:#999; cursor:default;}
    
12. .jf_goods_items{ width:100%; overflow:hidden;}
    
13. .jf_goods_imglist{ font-family:"simsun"; margin-right:-20px; zoom:1;}
    
14. .jf_goods_imglist li{ width:193px; height:207px; float:left; color:#333; margin:20px 20px 0 0;}
    
15. .storelist li{height:152px; }
    
16. .liflag li{_margin:20px 13px 0 0;}
    
17. .jf_goods_imglist li p{ line-height:24px;}
    
18. .jf_goods_imglist li a.title{ height:24px; color:#1c8ed3; display:block; line-height:24px; margin-top:3px; overflow:hidden;}
    
19. .jf_goods_imglist li span.title{ height:24px; line-height:24px; color:#333; font-weight:700; display:block;  margin-top:3px; overflow:hidden;}
    
20. .jf_goods_imglist li .score{ font-size:14px;}
    
21. .jf_goods_imglist li .score span{ color:#ff0000; font-size:14px; font-weight:700; margin-right:4px;font-family: "arial"}
    
22. .jf_goods_imglist li .score .plus{ margin:0 3px;}
    
23. .jf_goods_imglist li .time{ color:#ff6600; font-weight:700; margin-left:6px;}
    
24. .jf_goods_imglist li .cost{ font-size:14px; color:#333; text-decoration:line-through; margin-left:19px;font-family: "arial"}
    
25. .jf_goods_imglist li .del_line{ text-decoration: line-through;}
    
26. .jf_goods_imglist li .num{ font-weight:700; margin:0 5px;font-family: "arial"}
    
27. .jf_goods_imglist li img{ width:200px; height:130px; }
    
28. .storelist li img{height:75px; }
    
29. .jf_goods_imglist li .img_holder{ height:130px; position:relative; overflow:hidden;}
    
30. .storelist li .img_holder{ height:75px;}
    
31. .jf_goods_imglist li .mask{ background:#ff9600; width:100%; height:100%; position:absolute; left:0; top:130px;  filter:alpha(opacity=95);opacity:0.95; cursor:pointer}
    
32. .storelist li .mask{ height:65px;}
    
33. .jf_goods_imglist li .mask p{ color:#fff; line-height:20px; /*padding:0 13px;*/ word-wrap:break-word; word-break:break-all; }
    
34. .jf_goods_imglist li .mask .prize_tit{ padding:8px 13px 2px; font-weight:700;}
    
35. .jf_goods_imglist .glb_graybtn_s{ float:right;}
    
36. .jf_goods_imglist_s li{ width:168px; height:189px;}
    
37. .storelist_s li{height:140px}
    
38. .jf_goods_imglist_s li img{ width:168px; height:112px;}
    
39. .storelist_s li img{height:63px}
    
40. .jf_goods_imglist_s li .img_holder{ height:112px;}
    
41. .storelist_s li .img_holder{height:63px;}
    
42. .glb_graybtn_s, .glb_graybtn_dis, .glb_orgbtn_s, .glb_disbtn_s{ background:url({siteurl}source/plugin/it618_scoremall/images/glb_btn.png) no-repeat 0 -391px; height:25px; line-height:25px; font-size:0; display:inline-block; padding-left:11px; vertical-align:middle; }
    
43. .glb_graybtn_s span, .glb_graybtn_dis span, .glb_orgbtn_s span, .glb_disbtn_s span{ background:url({siteurl}source/plugin/it618_scoremall/images/glb_btn.png) no-repeat 100% -391px; color:#555; line-height:24px; font-size:12px; padding-bottom:1px; display:inline-block; padding-right:11px; vertical-align:top; cursor:pointer; }
    
44. .glb_graybtn_s:hover{ background-position:0 -416px; text-decoration:none;}
    
45. .glb_graybtn_s:hover span{ background-position:100% -416px;}
    
46. </style>
    
47. <div class="jf_main">
    
48.         <div class="jf_main_hd">
    
49.                 <div class="jf_select_bar">
    
50.                         <a href="{siteurl}plugin.php?id=it618_scoremall:scoremall_list" target="_blank">更多>></a>
    
51.                 </div>
    
52.                 <h2 class="title">
    
53.                         热销商品
    
54.                 </h2>
    
55.         </div>
    
56.         <div class="jf_main_bd">
    
57.                 <div class="jf_goods_items">
    
58.                         <ul class="jf_goods_imglist jf_goods_imglist_s clearfix" id="j-group-goods-1">
    
59.                                 [loop]
    
60.                                 <li>
    
61.                                         <div class="img_holder">
    
62.                                                 <a href="{url}" target="_blank"><img src="{src}" alt="{name}" /></a>
    
63.                                         </div>
    
64. <a href="{url}" class="title" target="_blank">{name}</a>
    
65.                                         <p>
    
66.                                                 <span class="score"><span>{price}</span>{creditname}</span><span class="cost"></span>
    
67.                                         </p>
    
68.                                         <p>
    
69.                                                 <a href="{url}" class="glb_graybtn_s" target="_blank"><span>立即兑换</span></a>已兑<span class="num">{salecount}</span>件
    
70.                                         </p>
    
71.                                 </li>
    
72. [/loop]
    
73.                         </ul>
    
74.                 </div>
    
75.         </div>
    
76. </div>

复制代码