Manyou诚邀开发者加盟 | 常见问题
《站长》俱乐部官方群公布 城市联络员机会多多		立即免费下载 Discuz!7.0.0 正式版
安装升级指南 | 用户手册 | 新手建站学堂		基于.net架构的Discuz!NT2.6正式版发布
Comsenz公司2009年招贤纳士，期待您的加盟
Discuz!收费服务内容及价格
7月重庆、成都、西安三地社区运营实战特训速报名		Discuz!/UCHome 专用官方虚拟主机
牧场新服一起联运：豆浆机免费带回家		基于Discuz!的免费论坛空间5D6D
康盛创想《站长》俱乐部18城市互动之旅报名ing
123456
返回列表 回复 发帖

Discuz! Team - Add-ons

Rank: 7Rank: 7Rank: 7

帖子
3626 
积分
6963 
威望
334  
金币
455 个 
体力
3123  
注册时间
2005-12-23 
楼主
打印
tT
南芝恋发表于 2007-9-6 14:20 | 只看该作者

6.0风格制作（升级）教程----模板文件的修改----footer.htm的修改

上一节：模板文件的修改----header.htm的修改

五、模板文件的修改----footer.htm的修改

       上一节里边，我们分析了header.htm文件的修改，基本稳定了头部的样式。那么现在让我们修改底部的样式，以达到和图片一样的效果。

        首先让我们看一下在未改动footer.htm文件以及css.htm文件时底部的模样：
        和草图上对比，我们的草图上，目前底部左边的部分在上边，而右边的部分并排在下边。现在，我们打开footer.htm文件，看一下底部的结构。底部其实就是一个广告代码和底部的版权。我们只看版权的地方：
  1. <div id="footer">
  2.     <div class="wrap">
  3.         <div id="footlinks">
  4.    
  5.         <p>{lang time_now}<!--{if $icp}--> <a
  6. href="http://www.miibeian.gov.cn/"
  7. target="_blank">$icp</a><!--{/if}--></p>
  8.             <p>
  9.                 <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>
  10.    
  11.             - <a href="mailtoadminemail">{lang
  12. contactus}</a> - <a href="$siteurl"
  13. target="_blank">$sitename</a>
  14.                 <!--{if
  15. $archiverstatus}--> - <a href="archiver/"
  16. target="_blank">Archiver</a><!--{/if}-->
  17.                 <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
  18.                 - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
  19.                 <!--{if !empty($stylejumpstatus)}-->
  20.                     - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>
  21.                     <script type="text/javascript">
  22.                     function setstyle(styleid) {
  23.                     <!--{if CURSCRIPT == 'forumdisplay'}-->
  24.                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
  25.                     <!--{elseif CURSCRIPT == 'viewthread'}-->
  26.                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
  27.                     <!--{else}-->
  28.                         location.href = '$indexname?styleid=' + styleid;
  29.                     <!--{/if}-->
  30.                     }
  31.                     </script>
  32.                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
  33.                     <ul>
  34.                         <!--{loop $stylejump $id $name}-->
  35.    
  36.                     <li{if $id == $styleid}
  37. class="current"{/if}><a href="###"
  38. onclick="setstyle($id)">$name</a></li>
  39.                         <!--{/loop}-->
  40.                     </ul>
  41.                     </div>
  42.                 <!--{/if}-->
  43.             </p>
  44.         </div>

  46.    
  47.     <a href="http://www.discuz.net" target="_blank" title="owered
  48. by Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
  49. alt="Discuz!" /></a>
  50.         <p id="copyright">
  51.    
  52.         Powered by <strong><a href="http://www.discuz.net"
  53. target="_blank">Discuz!</a></strong>
  54. <em>$version</em><!--{if !empty($boardlicensed)}-->
  55. <a
  56. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
  57. target="_blank">Licensed</a><!--{/if}-->
  58.             © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
  59.         </p>
  60.         {eval updatesession();}
  61.         <!--{if debuginfo()}-->
  62.    
  63.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
  64. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
  65. Gzip enabled<!--{/if}-->.</p>
  66.         <!--{/if}-->
  67.     </div>
  68. </div>
复制代码
总体的外围是#footer，然后是.wrap，然后就是footlink论坛信息，以及论坛程序版权及数据库信息。在这里，我们不使用.wrap，所以先将.wrap这个框架去掉。然后是将footlink这部分剪切出去，即移动到footer框架的下边：
  1. <div id="footer">

  3.         <a
  4. href="http://www.discuz.net" target="_blank" title="owered by
  5. Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
  6. alt="Discuz!" /></a>
  7.         <p id="copyright">
  8.    
  9.         Powered by <strong><a href="http://www.discuz.net"
  10. target="_blank">Discuz!</a></strong>
  11. <em>$version</em><!--{if !empty($boardlicensed)}-->
  12. <a
  13. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
  14. target="_blank">Licensed</a><!--{/if}-->
  15.             © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
  16.         </p>
  17.         {eval updatesession();}
  18.         <!--{if debuginfo()}-->
  19.    
  20.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
  21. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
  22. Gzip enabled<!--{/if}-->.</p>
  23.         <!--{/if}-->
  24. </div>
  25. <div id="footlinks">
  26.    
  27.         <p>{lang time_now}<!--{if $icp}--> <a
  28. href="http://www.miibeian.gov.cn/"
  29. target="_blank">$icp</a><!--{/if}--></p>
  30.             <p>
  31.                 <a href="member.php?action=clearcookies&formhash={FORMHASH}">{lang clear_cookies}</a>
  32.    
  33.             - <a href="mailtoadminemail">{lang
  34. contactus}</a> - <a href="$siteurl"
  35. target="_blank">$sitename</a>
  36.                 <!--{if
  37. $archiverstatus}--> - <a href="archiver/"
  38. target="_blank">Archiver</a><!--{/if}-->
  39.                 <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
  40.                 - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
  41.                 <!--{if !empty($stylejumpstatus)}-->
  42.                     - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>
  43.                     <script type="text/javascript">
  44.                     function setstyle(styleid) {
  45.                     <!--{if CURSCRIPT == 'forumdisplay'}-->
  46.                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
  47.                     <!--{elseif CURSCRIPT == 'viewthread'}-->
  48.                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
  49.                     <!--{else}-->
  50.                         location.href = '$indexname?styleid=' + styleid;
  51.                     <!--{/if}-->
  52.                     }
  53.                     </script>
  54.                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
  55.                     <ul>
  56.                         <!--{loop $stylejump $id $name}-->
  57.    
  58.                     <li{if $id == $styleid}
  59. class="current"{/if}><a href="###"
  60. onclick="setstyle($id)">$name</a></li>
  61.                         <!--{/loop}-->
  62.                     </ul>
  63.                     </div>
  64.                 <!--{/if}-->
  65.             </p>
  66. </div>
复制代码
现在我们先对footlink这部分进行设置，因为按照草图，它是显示在最下边的。参看这部分代码，发现icp备案号在这部分里边，因此，我们先将其剪切到footer框架里边。再将两个段落<p>合并成一个段落：
  1. <div id="footlinks">
  2.    
  3.         <p>{lang time_now} - <a
  4. href="member.php?action=clearcookies&formhash={FORMHASH}">{lang
  5. clear_cookies}</a>
  6.                 - <a
  7. href="mailtoadminemail">{lang contactus}</a> - <a
  8. href="$siteurl" target="_blank">$sitename</a>
  9.            
  10.     <!--{if $archiverstatus}--> - <a href="archiver/"
  11. target="_blank">Archiver</a><!--{/if}-->
  12.                 <!--{if $wapstatus}--> - <a href="wap/" target="_blank">WAP</a><!--{/if}-->
  13.                 - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
  14.                 <!--{if !empty($stylejumpstatus)}-->
  15.                     - <span id="styleswitcher" class="dropmenu" onmouseover="showMenu(this.id)">{lang style}</span>
  16.                     <script type="text/javascript">
  17.                     function setstyle(styleid) {
  18.                     <!--{if CURSCRIPT == 'forumdisplay'}-->
  19.                         location.href = 'forumdisplay.php?fid=$fid&page=$page&styleid=' + styleid;
  20.                     <!--{elseif CURSCRIPT == 'viewthread'}-->
  21.                         location.href = 'viewthread.php?tid=$tid&page=$page&styleid=' + styleid;
  22.                     <!--{else}-->
  23.                         location.href = '$indexname?styleid=' + styleid;
  24.                     <!--{/if}-->
  25.                     }
  26.                     </script>
  27.                     <div id="styleswitcher_menu" class="popupmenu_popup" style="display: none;">
  28.                     <ul>
  29.                         <!--{loop $stylejump $id $name}-->
  30.    
  31.                     <li{if $id == $styleid}
  32. class="current"{/if}><a href="###"
  33. onclick="setstyle($id)">$name</a></li>
  34.                         <!--{/loop}-->
  35.                     </ul>
  36.                     </div>
  37.                 <!--{/if}-->
  38.             </p>
  39. </div>
复制代码
更新下缓存，看一下现在的效果：

       有点错位哦哈，我们现在打开css.htm文件对其进行设置。查找#footlinks { float: right; margin-top:-3px; text-align: right;}，现在这部分已经是独立的一部分了，而且，也有专门的底部背景，查看背景图片foot_bg.gif的大小为944*31，将其宽高设置，设置背景路径background:url({IMGDIR}/foot_bg.gif) centerno-repeat，然后，设置文字居中text-align:center，位置居中margin:0 auto，更新缓存看下效果：

        是不是已经ok了？文字能否下一点点？可以的哈，还是在footlinks里边，将height修改为26px，添加一个padding-top:5px，更新缓存，刷新页面看下：

        好了把，现在我们来处理论坛程序版权的地方：
  1. <div id="footer">
  2. <p><!--{if
  3. $icp}--> <a href="http://www.miibeian.gov.cn/"
  4. target="_blank">$icp</a><!--{/if}--></p>
  5. <a
  6. href="http://www.discuz.net" target="_blank" title="owered by
  7. Discuz!"><img src="{IMGDIR}/discuz_icon.gif" border="0"
  8. alt="Discuz!" /></a>
  9.         <p id="copyright">
  10.    
  11.         Powered by <strong><a href="http://www.discuz.net"
  12. target="_blank">Discuz!</a></strong>
  13. <em>$version</em><!--{if !empty($boardlicensed)}-->
  14. <a
  15. href="http://www.discuz.com/index.php?action=certificate&host=$_SERVER[HTTP_HOST]"
  16. target="_blank">Licensed</a><!--{/if}-->
  17.             © 2001-2007 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
  18.         </p>
  19.         {eval updatesession();}
  20.         <!--{if debuginfo()}-->
  21.    
  22.         <p id="debuginfo"&gtrocessed in $debuginfo[time]
  23. second(s), $debuginfo[queries] queries<!--{if $gzipcompress}-->,
  24. Gzip enabled<!--{/if}-->.</p>
  25.         <!--{/if}-->
  26. </div>
复制代码
这部分其实不怎么需要调整，只需要先将那个图标去掉，然后在css.htm定义一下宽度及位置即可。在css.htm文件里查找#footer {border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color:{TEXT}; padding: 12px 0;}，首先是设置宽度width:944px，边框去掉，背景去掉，使其居中text-align:center，margin:0auto，更新缓存，看下现在的效果：

       怎么样，可以了把～现在我们的头部和底部都定义好了，唯独差的就是中间部分的背景哦，因为.wrap定义了中间的缩进，所以我们需要在.wrap外边再套一个盒子。打开header.htm文件，在底部<div class="wrap">之上加上<divid="mycontent">，然后打开footer.htm文件，在<divid="footlinks">之上添加一个</div>，因为我们要将论坛程序的版权这部分同样用上背景。最后，打开css.htm或者css_append.htm文件，在文件的最末端，加上这部分的定义：#mycontent {width:941px; margin:0auto; padding:0; border-left:1px solid #599502; border-right:1px solid#599502; background:#B5FF94; }，然后更新缓存，看下效果：


       已经可以了把，就是在顶部下边有一点空隙，应该是foruminfo的顶margin问题，打开css.htm文件，查找#foruminfo {width: 100%; overflow: hidden; margin: 10px 0; color: {TEXT};}，将其替换为：#foruminfo { width: 100%; overflow: hidden; margin: 0 0 10px 0;color: {TEXT};}，更新缓存，刷新页面，可以看到已经没有什么问题了。到现在，整个页面已经基本完成了，而且在ie6、ie7、firefox2.0、opera9.2浏览器下都没有问题，关于文字的颜色你可以自行到后台按照自己的品味进行修改，再次就都保持黑色啦。大家可以看下演示：http://koushuijie.com/forum/index.php?styleid=7

下节预告：一些细节的修改

[ 本帖最后由 南芝恋 于 2007-9-6 14:30 编辑 ]

[ 本帖最后由 南芝恋 于 2007-9-6 14:34 编辑 ]
1

评分次数

收藏 分享 评分
如果你的问题长时间没有回应，请将帖子地址报告给版主。

想学CSS，就来：CSSer - 为web标准化而努力：http://www.csser.name
回复 引用

订阅 TOP

King

Rank: 6Rank: 6

帖子
635 
积分
1022 
威望
39  
金币
69 个 
体力
598  
注册时间
2006-3-20 
沙发
水月无痕发表于 2007-9-6 15:16 | 只看该作者
好东西呀.......沙发.
我不是王子也可以有自己的国度，我在我的世界里独舞
回复 引用

TOP

头像被屏蔽

Banned to Post

帖子
5169 
积分
4400 
威望
23  
金币
23 个 
体力
5186  
注册时间
2007-3-15 
藤椅
【兄弟合租】发表于 2007-9-6 15:19 | 只看该作者
提示: 作者被禁止或删除 内容自动屏蔽
回复 引用

TOP

King

Rank: 6Rank: 6

帖子
1505 
积分
1281 
威望
0  
金币
51 个 
体力
736  
注册时间
2007-7-2 
板凳
81os发表于 2007-9-6 16:25 | 只看该作者


这帖子不顶就太说不过去了
闲着没事玩呢
回复 引用

TOP

Lord

Rank: 4

帖子
975 
积分
795 
威望
0  
金币
10 个 
体力
1012  
注册时间
2007-7-2 
报纸
王二麻发表于 2007-9-6 16:42 | 只看该作者
回复 引用

TOP

Lord

Rank: 4

帖子
975 
积分
795 
威望
0  
金币
10 个 
体力
1012  
注册时间
2007-7-2 
地板
王二麻发表于 2007-9-6 16:42 | 只看该作者
回复 引用

TOP

Lord

Rank: 4

帖子
975 
积分
795 
威望
0  
金币
10 个 
体力
1012  
注册时间
2007-7-2 
7#
王二麻发表于 2007-9-6 16:43 | 只看该作者
回复 引用

TOP

Lord

Rank: 4

帖子
975 
积分
795 
威望
0  
金币
10 个 
体力
1012  
注册时间
2007-7-2 
8#
王二麻发表于 2007-9-6 16:43 | 只看该作者
严重支持楼主！！！！！！！！！！！
回复 引用

TOP

Lord

Rank: 4

帖子
975 
积分
795 
威望
0  
金币
10 个 
体力
1012  
注册时间
2007-7-2 
9#
王二麻发表于 2007-9-6 16:44 | 只看该作者
这么好的文章，居然没人顶，还有王法吗？？？
回复 引用

TOP

Lord

Rank: 4

帖子
975 
积分
795 
威望
0  
金币
10 个 
体力
1012  
注册时间
2007-7-2 
10#
王二麻发表于 2007-9-6 16:47 | 只看该作者
还没人？？？？再顶！！
回复 引用

TOP

123456
返回列表