[教学] 首页添加自定义板块 [复制链接]

icode

如图：

2018-11-13 21:23

预览地址
http://icode.258club.com/index.php?styleid=16

安装方法：
1、打开discuz模板找到

1. <!--{if $_DCACHE['forumlinks'][0] || $_DCACHE['forumlinks'][1] || $_DCACHE['forumlinks'][2]}-->

复制

在上边加

1. <div id="wj-tb" class="wj-chat">
   
2. <ul>
   
3. <li id="wj-tbm_1" onmouseover="x:HoverLiz(1);" class="wj-tlb-hover1">AAAAA</li>
   
4. <li id="wj-tbm_2" onmouseover="x:HoverLiz(2);" class="wj-tlb-normal1">BBBBB</li>
   
5. <li id="wj-tbm_3" onmouseover="x:HoverLiz(3);" class="wj-tlb-normal1">CCCCC</li>
   
6. </ul>
   
7. </div>
   
8. 
   
9. <div style="height: 380px;border: solid #DDDDDD;border-width: 1px;border-top: none;background: #fff;border-radius: 5px;margin-bottom: 20px;">
   
10. <div class="wj-tlb-dism" id="wj-tbcm_01">
    
11. <ul style="padding-top: 24px;margin-left: 11px;">
    
12. {eval request('主题列表_573');}
    
13. </ul>
    
14. </div>
    
15. 
    
16. <div class="wj-tlb-undism" id="wj-tbcm_02">
    
17. <ul style="padding-top: 24px;margin-left: 11px;">
    
18. {eval request('主题列表_573_aA4');}
    
19. </ul>
    
20. </div>
    
21. 
    
22. <div class="wj-tlb-undism" id="wj-tbcm_03">
    
23. <ul style="padding-top: 24px;margin-left: 11px;">
    
24. {eval request('主题列表_573_mIK');}
    
25. </ul>
    
26. </div>
    
27. </div>
    
28. 
    
29. <script>
    
30. function g(o) {
    
31.     return document.getElementById(o);
    
32. }
    
33. function HoverLiz(n) {
    
34.     for(var i=1;i<=3;i++) {
    
35.         g('wj-tbm_'+i).className='wj-tlb-normal1';
    
36.         g('wj-tbcm_0'+i).className='wj-tlb-undism';
    
37.     }
    
38.     g('wj-tbcm_0'+n).className='wj-tlb-dism';
    
39.     g('wj-tbm_'+n).className='wj-tlb-hover1';
    
40. }
    
41. </script>

复制

2、在css_append加

1. .wj-chat {
   
2. background: #fff;
   
3.     line-height: 45px;
   
4.     margin-bottom: 20px;
   
5.     font-size: 16px;
   
6.     border-radius: 5px;
   
7.     background-color: #ecf2f4;
   
8.     overflow: hidden;
   
9. }
   
10. .wj-chat ul {
    
11. height: 32px;
    
12. padding-left: 5px;
    
13. line-height: 30px;
    
14. }
    
15. .wj-chat li {
    
16. float: left;
    
17. text-align: center;
    
18. width: 150px;
    
19. }
    
20. .wj-tlb-hover1 {
    
21. background: #FFF;
    
22. font-weight: 700;
    
23. color: #333;
    
24. display: block;
    
25. margin-top: 2px;
    
26. }
    
27. .wj-tlb-normal1 {
    
28. display: block;
    
29. }
    
30. .wj-tlb-dism { display: block; }
    
31. .wj-tlb-undism { display: none; }
    
32. ul,li { list-style: none; }
    
33. 
    
34. 
    
35. .wj-tlb-dism li {
    
36. float: left;
    
37. white-space: nowrap;
    
38. margin: 0 10px 10px 0;
    
39. text-overflow: ellipsis;
    
40. padding: 10px;
    
41. border: solid #DDDDDD;
    
42. border-width: 1px;
    
43. background-color: #F8F8F8;
    
44. text-align: center;
    
45. overflow: hidden;
    
46. }

复制

3、解压下面文件后在后台数据调用导入
discuz_request_20181113.rar (1.08 KB)

下载次数: 19

2018-11-13 21:27

下载消耗 金钱 1  

梅子

懵逼.jpg

麻城生活网

楼主发帖辛苦了，谢谢楼主的分享！

天使小小

楼主发帖辛苦了，谢谢楼主的分享！

波斯佳人

这个效果简直不要太赞，

icode

@邹城老王@云惠果果@雨@开心@未知@眼神黯淡@未来未来呀@王现鹏@恒小杰@啊哈哈@張飛@三国人物@小豪@黑凤梨@打印机@跟上脚步@长度长度@初学者@小安@刘阳田甜@奇橙@喵喵娘@阿方方@閻羅@雷锋游戏@路途@啊哈雷@北京大新@规定@今天今天@上磜@我来了@翔子@起什么名字@夜影夜空@米酷@琪乐@众望所归@叉先生@皓皓兒@哥哥@李可可@李建军@我爱建站@一个名字@中文注册@读书郎@琼斯博士@竞技鱼@邢若櫻@测试账号五@天使小小@零九三零@无界@Yenifer@老闆@少女@howqun@芙蓉姐姐@麻城生活网@梅子@無名@icode

李奥

看起来不错