关于自己添加模块模板

原始代码

1. <div class="sharePicShell">
   
2.         <dl class="sharePictorial shPic01">
   
3.             <dt onmouseout="this.className='';" onmousemove="this.className='on';">
   
4.                 <img src="http://img1.xungou.com/Recommend/201111171850/2011111718502321207.jpg">
   
5.                 <a class="jumpTran" href="#" target="_blank">
   
6.                 <p class="sharePicMake">呢大衣</p>
   
7.                 <p class="sharePicBg"></p>
   
8.                 </a>
   
9.             </dt>
   
10.             <dd class="" onmouseout="this.className='';" onmousemove="this.className='on';">
    
11.                 <img src="http://img1.xungou.com/Recommend/201111181202/2011111812022832095.jpg">
    
12.                 <a class="jumpTran" href="#" target="_blank">
    
13.                 <p class="sharePicMake">卫衣</p>
    
14.                 <p class="sharePicBg"></p>
    
15.                 </a>
    
16.             </dd>
    
17.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
18.                 <img src="http://img1.xungou.com/Recommend/201111181535/2011111815355679688.jpg">
    
19.                 <a class="jumpTran" href="#" target="_blank">
    
20.                 <p class="sharePicMake">开衫</p>
    
21.                 <p class="sharePicBg"></p>
    
22.                 </a>
    
23.             </dd>
    
24.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
25.                 <img src="http://img1.xungou.com/Recommend/201110121536/2011101215360224349.jpg">
    
26.                 <a class="jumpTran" href="#" target="_blank">
    
27.                 <p class="sharePicMake">连衣裙</p>
    
28.                 <p class="sharePicBg"></p>
    
29.                 </a>
    
30.             </dd><br>
    
31.             <dd class="" onmouseout="this.className='';" onmousemove="this.className='on';">
    
32.                 <img src="http://img1.xungou.com/Recommend/201111181233/2011111812330136021.jpg">
    
33.                 <a class="jumpTran" href="#" target="_blank">
    
34.                 <p class="sharePicMake">棉衣</p>
    
35.                 <p class="sharePicBg"></p>
    
36.                 </a>
    
37.             </dd>
    
38.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
39.                 <img src="http://img1.xungou.com/Recommend/201111181324/2011111813244357388.jpg">
    
40.                 <a class="jumpTran" href="#" target="_blank">
    
41.                 <p class="sharePicMake">衬衫</p>
    
42.                 <p class="sharePicBg"></p>
    
43.                 </a>
    
44.             </dd>
    
45.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
46.                 <img src="http://img1.xungou.com/Recommend/201111181320/2011111813200611590.jpg">
    
47.                 <a class="jumpTran" href="#" target="_blank">
    
48.                 <p class="sharePicMake">铅笔裤</p>
    
49.                 <p class="sharePicBg"></p>
    
50.                 </a>
    
51.             </dd>
    
52.         </dl>
    
53.                 <dl class="sharePictorial shPic01">
    
54.                         <dt onmouseout="this.className='';" onmousemove="this.className='on';">
    
55.                 <img src="http://img1.xungou.com/Recommend/201111181534/2011111815345543000.jpg">
    
56.                 <a class="jumpTran" href="#" target="_blank">
    
57.                 <p class="sharePicMake">毛衣</p>
    
58.                 <p class="sharePicBg"></p>
    
59.                 </a>
    
60.             </dt>
    
61.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
62.                     <img src="http://img1.xungou.com/Recommend/201111181233/2011111812333383077.jpg">
    
63.                     <a class="jumpTran" href="#" target="_blank">
    
64.                     <p class="sharePicMake">长袖T</p>
    
65.                                 <p class="sharePicBg"></p>
    
66.                                 </a>
    
67.                         </dd>
    
68.                         <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
69.                                 <img src="http://img1.xungou.com/Recommend/201111181401/2011111814010877277.jpg">
    
70.                                 <a class="jumpTran" href="#" target="_blank">
    
71.                                 <p class="sharePicMake">西装</p>
    
72.                                 <p class="sharePicBg"></p>
    
73.                                 </a>
    
74.                         </dd>
    
75.                         <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
76.                                 <img src="http://img1.xungou.com/Recommend/201111221124/2011112211242780100.jpg">
    
77.                                 <a class="jumpTran" href="#" target="_blank">
    
78.                                 <p class="sharePicMake">短裙</p>
    
79.                                 <p class="sharePicBg"></p>
    
80.                                 </a>
    
81.                         </dd><br>
    
82.                         <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
83.                                 <img src="http://img1.xungou.com/Recommend/201111181125/2011111811252891167.jpg">
    
84.                                 <a class="jumpTran" href="#" target="_blank">
    
85.                                 <p class="sharePicMake">皮衣</p>
    
86.                                 <p class="sharePicBg"></p>
    
87.                                 </a>
    
88.                         </dd>
    
89.                         <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
90.                                 <img src="http://img1.xungou.com/Recommend/201111181330/2011111813305562181.jpg">
    
91.                                 <a class="jumpTran" href="#" target="_blank">
    
92.                                 <p class="sharePicMake">打底裤</p>
    
93.                                 <p class="sharePicBg"></p>
    
94.                                 </a>
    
95.                         </dd>
    
96.                         <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
97.                                 <img src="http://img1.xungou.com/Recommend/201111181359/2011111813593143291.jpg">
    
98.                                 <a class="jumpTran" href="#" target="_blank">
    
99.                                 <p class="sharePicMake">家居服</p>
    
100.                                 <p class="sharePicBg"></p>
     
101.                                 </a>
     
102.                         </dd>
     
103.                 </dl>
     
104.         </div>
     
105.    
     
106.    

复制代码

我把原始html代码转换为调用论坛帖子代码后出现一点状况
首先我把这个代码在后台模块模板添加以下，然后再门户模板文件添加一个

1. <div class="wp">
   
2.                 <!--[diy=diy5]--><div id="diy5" class="area"></div><!--[/diy]-->
   
3.         </div>

复制代码

然后在首页diy编辑
出来的结果


内容都是一样的，然后不能横排



模块代码

1. <div class="sharePicShell">
   
2.         <dl class="sharePictorial shPic01">
   
3.         [loop]
   
4.             <dt onmouseout="this.className='';" onmousemove="this.className='on';">
   
5.                 <img src="{pic}">
   
6.                 <a class="jumpTran" href="{url}" target="_blank">
   
7.                 <p class="sharePicMake">{title}</p>
   
8.                 <p class="sharePicBg"></p>
   
9.                 </a>
   
10.             </dt>
    
11.             <dd class="" onmouseout="this.className='';" onmousemove="this.className='on';">
    
12.                 <img src="{pic}">
    
13.                 <a class="jumpTran" href="{url}" target="_blank">
    
14.                 <p class="sharePicMake">{title}</p>
    
15.                 <p class="sharePicBg"></p>
    
16.                 </a>
    
17.             </dd>
    
18.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
19.                 <img src="{pic}">
    
20.                 <a class="jumpTran" href="{url}" target="_blank">
    
21.                 <p class="sharePicMake">{title}</p>
    
22.                 <p class="sharePicBg"></p>
    
23.                 </a>
    
24.             </dd>
    
25.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
26.                 <img src="{pic}">
    
27.                 <a class="jumpTran" href="{url}" target="_blank">
    
28.                 <p class="sharePicMake">{title}</p>
    
29.                 <p class="sharePicBg"></p>
    
30.                 </a>
    
31.             </dd>
    
32.                         <br>
    
33.             <dd class="" onmouseout="this.className='';" onmousemove="this.className='on';">
    
34.                 <img src="{pic}">
    
35.                 <a class="jumpTran" href="{url}" target="_blank">
    
36.                 <p class="sharePicMake">{title}</p>
    
37.                 <p class="sharePicBg"></p>
    
38.                 </a>
    
39.             </dd>
    
40.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
41.                 <img src="{pic}">
    
42.                 <a class="jumpTran" href="{url}" target="_blank">
    
43.                 <p class="sharePicMake">{title}</p>
    
44.                 <p class="sharePicBg"></p>
    
45.                 </a>
    
46.             </dd>
    
47.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
48.                 <img src="{pic}">
    
49.                 <a class="jumpTran" href="{url}" target="_blank">
    
50.                 <p class="sharePicMake">{title}</p>
    
51.                 <p class="sharePicBg"></p>
    
52.                 </a>
    
53.             </dd>
    
54.                 [/loop]
    
55.         </dl>
    
56.         <dl class="sharePictorial shPic01">
    
57.         [loop]
    
58.             <dt onmouseout="this.className='';" onmousemove="this.className='on';">
    
59.                 <img src="{pic}">
    
60.                 <a class="jumpTran" href="{url}" target="_blank">
    
61.                 <p class="sharePicMake">{title}</p>
    
62.                 <p class="sharePicBg"></p>
    
63.                 </a>
    
64.             </dt>
    
65.             <dd class="" onmouseout="this.className='';" onmousemove="this.className='on';">
    
66.                 <img src="{pic}">
    
67.                 <a class="jumpTran" href="{url}" target="_blank">
    
68.                 <p class="sharePicMake">{title}</p>
    
69.                 <p class="sharePicBg"></p>
    
70.                 </a>
    
71.             </dd>
    
72.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
73.                 <img src="{pic}">
    
74.                 <a class="jumpTran" href="{url}" target="_blank">
    
75.                 <p class="sharePicMake">{title}</p>
    
76.                 <p class="sharePicBg"></p>
    
77.                 </a>
    
78.             </dd>
    
79.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
80.                 <img src="{pic}">
    
81.                 <a class="jumpTran" href="{url}" target="_blank">
    
82.                 <p class="sharePicMake">{title}</p>
    
83.                 <p class="sharePicBg"></p>
    
84.                 </a>
    
85.             </dd>
    
86.                         <br>
    
87.             <dd class="" onmouseout="this.className='';" onmousemove="this.className='on';">
    
88.                 <img src="{pic}">
    
89.                 <a class="jumpTran" href="{url}" target="_blank">
    
90.                 <p class="sharePicMake">{title}</p>
    
91.                 <p class="sharePicBg"></p>
    
92.                 </a>
    
93.             </dd>
    
94.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
    
95.                 <img src="{pic}">
    
96.                 <a class="jumpTran" href="{url}" target="_blank">
    
97.                 <p class="sharePicMake">{title}</p>
    
98.                 <p class="sharePicBg"></p>
    
99.                 </a>
    
100.             </dd>
     
101.             <dd onmouseout="this.className='';" onmousemove="this.className='on';">
     
102.                 <img src="{pic}">
     
103.                 <a class="jumpTran" href="{url}" target="_blank">
     
104.                 <p class="sharePicMake">{title}</p>
     
105.                 <p class="sharePicBg"></p>
     
106.                 </a>
     
107.             </dd>
     
108.                 [/loop]
     
109.         </dl>
     
110.         </div>

复制代码

坚持任性 发表于 2011-11-28 10:32
找模板就找我。模板百宝箱。1970821378

谢谢你的关注，我现在自己动手做呢，页面已经做出来了，就是调用数据有点问题，循环还没找好

你尝试着把每个图片的宽度都改小以后看看结果如何？

比如css中的.shPic01 dd img这个图片宽度改成90px

嗯，我在diy把外边距和内边距都设置0了，可以了，但是数据调用的，还有一点问题，数据都一样

cr180 发表于 2011-11-28 10:55
你尝试着把每个图片的宽度都改小以后看看结果如何？

比如css中的.shPic01 dd img这个图片宽度改成90px

嗯，我在diy把外边距和内边距都设置0了，可以了，但是数据调用的，还有一点问题，数据都一样

我也碰到了这样的问题