DZ6.1UC版修改并强化的首页四格

pollen

昨日对论坛首页原有的新热内容导航进行了修改和强化。在原有基础上增加了UCH的迷你博客、日志以及SS的资讯和论坛焦点专题的列表显示，等于由四格变为八格。
并且添加了四个焦点导航横幅，为了减轻服务器负担，这四个小横幅未使用论坛广告或数据调用，而是直接用了HTML代码，如果你需要的话，可以改成调用论坛广告功能，这样修改起来比较方便。

演示：http://bbs.cnwyw.net
代码很好懂的，就不做注解了。首页四格的原文见另帖：http://www.discuz.net/thread-696558-1-2.html。

1. <style type="text/css">
   
2. <!--
   
3. .aoyundaojishi {
   
4.     text-align: center;
   
5.     vertical-align: middle;
   
6.     width: 100%;
   
7.     list-style-type: none;
   
8.     float:left;
   
9.     clear: none;
   
10.     background-color: #CC0000;
    
11.     font-size: 12px;
    
12.     color: #FFFFFF;
    
13.     font-family: "微软雅黑", "新宋体", Arial, sans-serif;
    
14.     text-align: center;
    
15.     height:24px;
    
16. }
    
17. .aoyundaojishifont {
    
18. text-weight: bold;
    
19. color: #ffcc00;
    
20. }
    
21. .tianqiyubao {
    
22.     text-align: center;
    
23.     vertical-align: middle;
    
24.     width: 100%;
    
25.     list-style-type: none;
    
26.     float:left;
    
27.     clear: none;
    
28.     background-color: #66CCFF;
    
29.     font-size: 12px;
    
30.     text-align: center;
    
31.     height:24px;
    
32. }
    
33. .redianzhuanti {
    
34.     text-align: center;
    
35.     vertical-align: middle;
    
36.     width: 100%;
    
37.     list-style-type: none;
    
38.     float:left;
    
39.     clear: none;
    
40.     background-color: #CAD9EA;
    
41.     font-size: 12px;
    
42.     text-align: left;
    
43. }
    
44. .redianzhuantiname {
    
45.     color: #CC0000;
    
46.     font-weight: bold;
    
47.     font-family: "微软雅黑", "新宋体", Arial, sans-serif;
    
48. }
    
49. .kangzhenjiuzai {
    
50.     background-color: #000000;
    
51.     height: 24px;
    
52.     width: 300px;
    
53.     clear: none;
    
54.     text-align: center;
    
55.     vertical-align: middle;
    
56. }
    
57. .beijingaoyun {
    
58.     background-color: #33CC66;
    
59.     height: 24px;
    
60.     width: 300px;
    
61.     clear: none;
    
62.     text-align: center;
    
63.     vertical-align: middle;
    
64. }
    
65. -->
    
66. </style>
    
67. <script type="text/javascript" src="./images/FourShow/altitle.js"></script>
    
68. <div class="mainbox forumlist" style="padding:0;">
    
69. <table cellspacing="0" cellpadding="0">
    
70.   <thead class="category">
    
71.   <tr>
    
72.    <td align="center" style="padding:0 1px 0 0"><h3>≡论坛图片≡　　<a href="/picindex/" target="_blank" class="blue">论坛全部图片索引</a></h3></td>
    
73.    <td align="center" style="padding:0"><h3>≡ 最新主题 ≡</h3></td>
    
74.    <td align="center" style="padding:0 1px 0 1px"><h3>≡ 最新回复 ≡</h3></td>
    
75.    <td align="center" style="padding:0"><h3>≡ 近期热帖 ≡</h3></td>
    
76.   </tr>
    
77.   </thead>
    
78.   <tr>
    
79.    <td width="25%">
    
80.                 <script type="text/javascript">
    
81.                     var swf_width=300;
    
82.                     var swf_height=198;
    
83.                     var config='5|0xffffff|0x0099ff|50|0xffffff|0x0099ff|0x000000';
    
84.                     // config 设置分别为: 自动播放时间(秒)|文字颜色|文字背景色|文字背景透明度|按键数字色|当前按键色|普通按键色
    
85.                     var files='{$showpicpics}';
    
86.                     var links='{$showpiclinks}';
    
87.                     var texts='{$showpictexts}';
    
88.                     document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
    
89.                     document.write('<param name="movie" value="images/FourShow/focus.swf" />');
    
90.                     document.write('<param name="quality" value="high" />');
    
91.                     document.write('<param name="menu" value="false" />');
    
92.                     document.write('<param name=wmode value="opaque" />');
    
93.                     document.write('<param name="FlashVars" value="config='+config+'&bcastr_flie='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'" />');
    
94.                     document.write('<embed src="images/FourShow/focus.swf" wmode="opaque" FlashVars="config='+config+'&bcastr_flie='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
    
95.                     document.write('</object>');
    
96.                 </script>
    
97.    </td>
    
98.    <td width="25%">
    
99.                 <table border="0" cellpadding="0" cellspacing="0" width="100%">
    
100.                     <tr valign="top">
     
101.                         <td width="24" style="padding:0;border-top:0px;"><img src="images/FourShow/list.gif" border="0" /></td>
     
102.                         <td background="images/FourShow/listbg.gif" style="line-height:20px;padding:0;border-top:0px;background-repeat: repeat-y" width="100%">
     
103.                         <!--{loop $newPostArray $nthread}-->
     
104.                             <!--{if $nthread[replies]}-->
     
105.                                 <div style="overflow: hidden;height: 20px;width: 100%;"><a href="viewthread.php?tid=$nthread[tid]" $nthread['highlight'] title='最新帖子 {LF}所在论坛: $nthread[name]{LF}主题标题: $nthread[subject] {LF}主题作者: $nthread[author]{LF}发表时间: $nthread[date]{LF}浏览次数: $nthread[views] 次 {LF}回复次数: $nthread[replies] 次{LF}最后回复: $nthread[lastreplytime]{LF}{lang lastpost}: $nthread[lastposter]'>$nthread[view_subject]</a></div>
     
106.                                     <!--{else}-->
     
107.                                 <div style="overflow: hidden;height: 20px;width: 100%;"><a href="viewthread.php?tid=$nthread[tid]" $nthread['highlight'] title='最新帖子 {LF}所在论坛: $nthread[name]{LF}主题标题: $nthread[subject] {LF}主题作者: $nthread[author]{LF}发表时间: $nthread[date]{LF}浏览次数: $nthread[views] 次 {LF}回复次数: $nthread[replies] 次{LF}最后回复: 暂时没有回复'>$nthread[view_subject]</a></div>
     
108.                             <!--{/if}-->
     
109.                         <!--{/loop}-->
     
110.                         </td>
     
111.                     </tr>
     
112.                 </table>
     
113.    </td>
     
114.    <td width="25%">
     
115.                 <table border="0" cellpadding="0" cellspacing="0" width="100%">
     
116.                     <tr valign="top">
     
117.                         <td width="24" style="padding:0;border-top:0px;"><img src="images/FourShow/list.gif" border="0" /></td>
     
118.                         <td background="images/FourShow/listbg.gif" style="line-height:20px;padding:0;border-top:0px;background-repeat: repeat-y" width="100%">
     
119.                         <!--{loop $newReplyArray $rthread}-->
     
120.                             <div style="overflow: hidden;height: 20px;width: 100%;"><a href="redirect.php?tid=$rthread[tid]&goto=lastpost#lastpost" $rthread['highlight'] title='最新回复 {LF}所在论坛: $rthread[name]{LF}主题标题: $rthread[subject]{LF}主题作者: $rthread[author]{LF}发表时间: $rthread[date]{LF}浏览次数: $rthread[views] 次{LF}回复次数: $rthread[replies] 次{LF}最后回复: $rthread[lastreplytime]{LF}{lang lastpost}: $rthread[lastposter]'>$rthread[view_subject]</a></div>
     
121.                         <!--{/loop}-->
     
122.                         </td>
     
123.                     </tr>
     
124.                 </table>
     
125.    </td>
     
126.    <td width="25%">
     
127.                 <table border="0" cellpadding="0" cellspacing="0" width="100%">
     
128.                     <tr valign="top">
     
129.                         <td width="24" style="padding:0;border-top:0px;"><img src="images/FourShow/list.gif" border="0" /></td>
     
130.                         <td background="images/FourShow/listbg.gif" style="line-height:20px;padding:0;border-top:0px;background-repeat: repeat-y" width="100%">
     
131.                         <!--{loop $hotArray $mthread}-->
     
132.                             <div style="overflow: hidden;height: 20px;width: 100%;"><a href="viewthread.php?tid=$mthread[tid]" $mthread['highlight'] title='本周热门 {LF}所在论坛: $mthread[name]{LF}主题标题: $mthread[subject]{LF}主题作者: $mthread[author]{LF}发表时间: $mthread[date]{LF}浏览次数: $mthread[views] 次{LF}回复次数: $mthread[replies] 次{LF}最后回复: $mthread[lastreplytime]{LF}{lang lastpost}: $mthread[lastposter]'>$mthread[view_subject]</a></div>
     
133.                         <!--{/loop}-->
     
134.                         </td>
     
135.                     </tr>
     
136.                 </table>
     
137.    </td>
     
138.   </tr>
     
139.   <tr>
     
140.    <td width="25%" valign="top"><div class="aoyundaojishi" id="timeDate"></div>
     
141. <SCRIPT>
     
142.   
     
143.           var now = new Date();
     
144.           function createtime(){
     
145.          
     
146.           var grt= new Date("8/08/2008 20:00:00");
     
147.          
     
148.           now.setTime(now.getTime()+250);
     
149.           days = (grt - now) / 1000 / 60 / 60 / 24;
     
150.           dnum = Math.floor(days);
     
151.           hours = (grt - now) / 1000 / 60 / 60 - (24 * dnum);
     
152.           hnum = Math.floor(hours);
     
153.           if(String(hnum).length ==1 ){hnum = "0" + hnum;}
     
154.           minutes = (grt - now) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
     
155.           mnum = Math.floor(minutes);
     
156.           if(String(mnum).length ==1 ){mnum = "0" + mnum;}
     
157.           seconds = (grt - now) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
     
158.           snum = Math.round(seconds);
     
159.           if(String(snum).length ==1 ){snum = "0" + snum;}
     
160.          
     
161.           document.getElementById("timeDate").innerHTML = "距2008北京奥运会开幕还有 <span class='aoyundaojishifont'>" + dnum + "</span>天:<span class='aoyundaojishifont'>" + hnum + "</span>小时:<span class='aoyundaojishifont'>"+ mnum + "</span>分:<span class='aoyundaojishifont'>"+ snum + "</span>秒";
     
162.           }
     
163.          
     
164.           setInterval("createtime()",250);        
     
165.                   
     
166. </SCRIPT>
     
167. <div class="redianzhuanti"><font class="redianzhuantiname"> ● 热点专题－北京奥运会</font><ul class="textinfolist">{eval request('pdbbsindex4g_zhuantiTAG');}</ul></div>
     
168. </td>
     
169.    <td width="25%">
     
170.    <div class="kangzhenjiuzai"><a style="overflow:hidden;" href="http://bbs.cnwyw.net/forum-71-1.html"><img src="imageslinshi/sichuandizhen.gif" border="0" align="absmiddle" alt='点击关注更多消息评论{LF}2008年5月12日14时28分，四川省汶川县发生7.8级地震{LF}伤亡重大，救援工作紧张进行中……' /></a></div>
     
171.    <h4><a href="http://my.cnwyw.net/space-doing.html" target="_blank">网友家园迷你博客</a> | <a href="http://my.cnwyw.net/space-doing.html" target="_blank" class="blue">写几句</a></h4><ul class="textinfolist"><script language="javascript" type="text/javascript" src="http://my.cnwyw.net/js.php?id=1"></script></ul></td>
     
172.    <td width="25%">
     
173.    <div class="beijingaoyun"><a style="overflow:hidden;" href="http://bbs.cnwyw.net/forum-13-1.html"><img src="imageslinshi/beijingaoyun.gif" border="0" align="absbottom" alt='点击这里，关注奥运，祝福北京{LF}同一个世界，同一个梦想。' /></a></div>
     
174.    <h4><a href="http://my.cnwyw.net/space-blog.html" target="_blank">网友家园新日志</a> | <a href="http://my.cnwyw.net/cp.php?ac=blog" target="_blank" class="blue">写日志</a></h4><ul class="textinfolist"><script language="javascript" type="text/javascript" src="http://my.cnwyw.net/js.php?id=2"></script></ul></td>
     
175.    <td width="25%">
     
176.    <div class="tianqiyubao">天气预报：{subtemplate PDqqweather}</div>
     
177.    <h4><a href="http://www.cnwyw.net/action-news.html" target="_blank">网友网新资讯</a> | <a href="http://www.cnwyw.net/admincp.php?action=spacenews" target="_blank" class="blue">我要发布</a></h4><ul class="textinfolist"><script language="JavaScript" src="http://www.cnwyw.net/batch.javascript.php?param=DGxWP1g8UjVWPwBzA3oCJlwwB3xRdQ8hBzRSMAxvAm0BZgd1C3NWfQFsAncBZVNiCHMOdQQ6XCxVY1ExUCIFYQxiVjpYPVIzVnQAQwNGAgVcFgd%2FUW8PfwcjUjoMbwJ0AW0HdwttVnIBRwJAAVJTRAguDjYEOlxvVW5RJFB5BTQMIlZmWHxSNVY1AGQDawIzXCEHOlFrDzQHelJgDDwCMwEzBy0Lc1YnAWECbwFkU2QIdQ42BDZcbFUoUWVQZgUrDHpWI1g%2FUnlWJwByA2ECPFwwBzBRcg8OBzlSOg%3D%3D"></script></ul></td>
     
178.   </tr>
     
179. </table>
     
180. </div>

复制代码

[ 本帖最后由 pollen 于 2008-5-14 16:13 编辑 ]

articlechina

看看先了