纯diy首页N格仿1314学习网

废话少说，上图


第一步，在风格模板目录discuz.htm下第46行<!--{/if}--> 下插入以下代码

1. <script src="static/HoverLi.js" type="text/javascript" ></script>
   
2. <div style="margin-bottom:5px;">
   
3. <table border=0 cellSpacing=0 cellPadding=0 width="100%" class="nge_border" style="border-collapse: collapse;">
   
4. <tr>
   
5. 
   
6. <td width="300">
   
7. <table border="0" cellSpacing=0 cellPadding=0 width="100%" style="height:24px">
   
8. <tbody>
   
9. <tr>
   
10. <td class="active1_6" style="border-right:none;">最新图片</td>
    
11. </tr>
    
12. </tbody>
    
13. </table>
    
14. </td>
    
15. 
    
16. <td>
    
17. <table cellSpacing=0 cellPadding=0 width="100%" class="nge_border_left" style="height:24px">
    
18. <tbody>
    
19. <tr>
    
20. <td class=active2_6 id=tb_11 align="center" onmouseover="HoverLi(1,1,5);" style="cursor: pointer">最新帖子</td><td class=active1_6 id=tb_12 align="center" onmouseover="HoverLi(1,2,5);" style="cursor: pointer">最新回复</td><td class=active1_6 id=tb_13 align="center" onmouseover="HoverLi(1,3,5);" style="cursor: pointer">推荐主题</td><td class=active1_6 id=tb_14 align="center" onmouseover="HoverLi(1,4,5);" style="cursor: pointer">精华主题</td><td class=active1_6 id=tb_15 align="center" onmouseover="HoverLi(1,5,5);" style="cursor: pointer">热门主题</td>
    
21. </tr>
    
22. </tbody>
    
23. </table>
    
24. </td>
    
25. 
    
26. <td width="20%">
    
27. <table cellSpacing=0 cellPadding=0 width="100%" style="height:24px;">
    
28. <tbody>
    
29. <tr class=indextd>
    
30. <td class=active2_6 id=tb_21 align="center" onmouseover="HoverLi(2,1,3);" style="cursor: pointer">最新会员</td><td class=active1_6 id=tb_22 align="center" onmouseover="HoverLi(2,2,3);" style="cursor: pointer">本月发贴</td><td class=active1_6 id=tb_23 align="center" onmouseover="HoverLi(2,3,3);" style="cursor: pointer">在线排行</td>
    
31. </tr>
    
32. </tbody>
    
33. </table>
    
34. </td>
    
35. 
    
36. </tr>
    
37. <tr>
    
38. 
    
39. <td width="300" align=center class="nge_border" style="border-top:none;">
    
40. <table border="0" cellSpacing=0 cellPadding=0 width="100%">
    
41. <tbody>
    
42. <tr>
    
43. <td align="center" style="position: relative; ">
    
44. <!--[diy=nzy0]--><div id="nzy0" class="area"></div><!--[/diy]-->
    
45. </td>
    
46. </tr>
    
47. </tbody>
    
48. </table>
    
49. </td>
    
50. 
    
51. <td style="">
    
52. <table border="0" cellSpacing=0 cellPadding=0 width="100%" class="nge_border_right">
    
53. <tbody>
    
54. <tr valign="top">
    
55. <td><img src="static/list.gif" alt="列表"></td>
    
56. <td class=indextd2>
    
57. <div id="tbc_11" class="dis"><!--[diy=nzy1]--><div id="nzy1" class="area"></div><!--[/diy]--></div>
    
58. <div id="tbc_12" class="undis"><!--[diy=nzy2]--><div id="nzy2" class="area"></div><!--[/diy]--></div>
    
59. <div id="tbc_13" class="undis"><!--[diy=nzy3]--><div id="nzy3" class="area"></div><!--[/diy]--></div>
    
60. <div id="tbc_14" class="undis"><!--[diy=nzy4]--><div id="nzy4" class="area"></div><!--[/diy]--></div>
    
61. <div id="tbc_15" class="undis"><!--[diy=nzy5]--><div id="nzy5" class="area"></div><!--[/diy]--></div>
    
62. </td>
    
63. </tr>
    
64. </tbody>
    
65. </table>
    
66. </td>
    
67. 
    
68. <td>
    
69. <table border="0" cellSpacing=0 cellPadding=0>
    
70. <tbody>
    
71. <tr valign="top">
    
72. <td><img src="static/list.gif" alt="列表"></td>
    
73. <td class=indextd2>
    
74. <div id="tbc_21" class="dis"><!--[diy=nzy21]--><div id="nzy21" class="area"></div><!--[/diy]--></div>
    
75. <div id="tbc_22" class="undis"><!--[diy=nzy22]--><div id="nzy22" class="area"></div><!--[/diy]--></div>
    
76. <div id="tbc_23" class="undis"><!--[diy=nzy23]--><div id="nzy23" class="area"></div><!--[/diy]--></div>
    
77. </td>
    
78. </tr>
    
79. <tbody>
    
80. </table>
    
81. </td>
    
82. 
    
83. </tr>
    
84. </table>
    
85. </div>

复制代码

第二步下载js文件上传到static目录下


第三步，在对应模板目录下插入以下css代码

1. /*N ks*/
   
2. .active2_6{height:23px;FONT-SIZE: 12px; BACKGROUND:#FFFFFF; CURSOR: hand; COLOR: #030e5f; TEXT-ALIGN: center;}
   
3. .active1_6{height:23px;FONT-SIZE: 12px; CURSOR: hand; COLOR: #030e5f; TEXT-ALIGN: center;}
   
4. .developer_css{FONT-SIZE: 12px;BACKGROUND:#EAF2FA;background-repeat:repeat-x;COLOR: #030e5f; TEXT-ALIGN: center;border-right:1px solid #AACCEE;border-top:1px solid #AACCEE}
   
5. .divindex {overflow: hidden;height: 24px;width: 100%;}
   
6. .pdiv{margin-top: 3px}
   
7. .indextd2{line-height:24px;padding:0;border-top:0px none;width:100%;background:url('static/listbg.gif'); }
   
8. .dis{display:block;}
   
9. .undis{display:none;}
   
10. .active1_6{BACKGROUND:#EAF2FA;border-right:1px solid #AACCEE;border-bottom:1px solid #AACCEE;}
    
11. .active2_6{border-right:1px solid #AACCEE;}
    
12. .nge_border{border:1px solid #AACCEE;}
    
13. .nge_border_left{border-left:1px solid #AACCEE;}
    
14. .nge_border_right{border-right:1px solid #AACCEE;}
    
15. /*N js*/

复制代码

ok 随便DIY 吧，

DIY代码范例：
1帖子类

1. [loop]
   
2. <div class=divindex><div style='float:right;margin-right:5px'>{dateline}</div><a href="{forumurl}" title="此文章发表在 {forumname} 点击进入此版块" target="_blank" >[{forumname}]</a><a href="{url}" title="帖子标题: {title}
   
3. 帖子作者:【{author}】
   
4. 发布时间: {dateline}
   
5. 浏览次数: {views} 次
   
6. 回复次数: {replies} 次
   
7. 回复时间: {lastpost}" target="_blank">{title}</a>
   
8. </div>
   
9. [/loop]

复制代码

2会员类

1. [loop]
   
2. <div class=divindex>
   
3. <div style='float:right;margin-right:5px'>
   
4. <font color=#FF0000>{regdate}</font></div>
   
5. <a href="{url}" title="会员:{title}" target="_blank" >{title}</a></div>
   
6. [/loop]

复制代码

ok全部结束谢谢支持，差点忘了AD一个引个蜘蛛 【 肇源网 】 http://www.zhaoyuan.in 交换友情链接，不限类型

差点忘了img 附件，补充一下上传到static目录下

交换链接：http://www.coinfans.net  中国钱币收藏网

{:soso_e109:}  那个CSS不晓得咋整了

请问您的QQ是多少呢 我按照你的方法来做 但是脱格了 请问怎么回事呢？？

{:soso_e181:}交换链接：http://

感觉人气不错。