〓〓教你制作漂亮、实用的便民图片导航（DISCUZ！X1.5通用）〓〓

便民图片导航演示网址： http://www.qufeizhou.com/forum.php

便民图片导航演示图：



看到很多DZ论坛门户页都有一个漂亮的图片导航，感觉很实用。对于DISCUZ 新手也许还不知道如何添加，现在我把方法分享给大家。添加及制作方法如下：

1. 首先找到门户portal的模板Index.htm，在你想要添加图片导航的位置，添加以下代码：

1. <DIV class=citylife>
   
2. <DIV style="DISPLAY: block" class=pub_city_life_con>
   
3. <DIV class=view-hover channelid="home" altname="" invokename="">
   
4. <DL>
   
5. <DD><A class=citylife_a
   
6. href="http://你的网站域名/thread-htm-fid-39.html"
   
7. target=_blank><SPAN>种植</SPAN>种植</A> </DD>
   
8. <DD><A class=citylife_b
   
9. href="http://你的网站域名/thread-htm-fid-183.html"
   
10. target=_blank><SPAN>美食</SPAN>美食</A> </DD>
    
11. <DD><A class=citylife_c
    
12. href="http://你的网站域名/thread-htm-fid-80.html"
    
13. target=_blank><SPAN>婚嫁</SPAN>婚嫁</A> </DD>
    
14. <DD><A class=citylife_d
    
15. href="http://你的网站域名/thread-htm-fid-240.html"
    
16. target=_blank><SPAN>手提</SPAN>手提</A> </DD>
    
17. <DD><A class=citylife_e
    
18. href="http://你的网站域名/thread-htm-fid-17.html"
    
19. target=_blank><SPAN>二手</SPAN>二手</A> </DD>
    
20. <DD><A class=citylife_f
    
21. href="http://你的网站域名/thread-htm-fid-36.html"
    
22. target=_blank><SPAN>旅游</SPAN>旅游</A> </DD></DL></DIV></div></div>

复制代码

2. 找到portal/css/index.css文件，在最下方添加以下代码：

1. 
   
2. .citylife {
   
3. MARGIN-TOP: 6px; WIDTH: 266px; DISPLAY: inline; FLOAT: left;
   
4. MARGIN-LEFT: 4px
   
5. }
   
6. .pub_city_life_con {
   
7. PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; WIDTH: 266px;
   
8. PADDING-RIGHT: 0px;
   
9. OVERFLOW: hidden; PADDING-TOP: 0px
   
10. }
    
11. .pub_city_life_con DD {
    
12. TEXT-ALIGN: center; LINE-HEIGHT: 18px; WIDTH: 65px; FLOAT: left;
    
13. HEIGHT: 65px;
    
14. OVERFLOW: hidden
    
15. }
    
16. .pub_city_life_con DD A {
    
17. WIDTH: 65px; DISPLAY: block; HEIGHT: 65px; CURSOR: pointer
    
18. }
    
19. .pub_city_life_con DD A:link {
    
20. COLOR: #333333; TEXT-DECORATION: none
    
21. }
    
22. .pub_city_life_con DD A:visited {
    
23. COLOR: #333333; TEXT-DECORATION: none
    
24. }
    
25. .pub_city_life_con DD A:hover {
    
26. COLOR: #333333; TEXT-DECORATION: none
    
27. }
    
28. .pub_city_life_con DD A:hover {
    
29. BACKGROUND: #dbf0fb 0px 0px
    
30. }
    
31. .pub_city_life_con DD SPAN {
    
32. BACKGROUND-IMAGE: url(../images/topdm.gif); TEXT-INDENT: -8000px;
    
33. WIDTH: 60px;
    
34. DISPLAY: block; HEIGHT: 50px
    
35. }
    
36. .pub_city_life_con DD A.citylife_a SPAN {
    
37. BACKGROUND-POSITION: -30px -25px
    
38. }
    
39. .pub_city_life_con DD A.citylife_b SPAN {
    
40. BACKGROUND-POSITION: -118px -24px
    
41. }
    
42. .pub_city_life_con DD A.citylife_c SPAN {
    
43. BACKGROUND-POSITION: -210px -25px
    
44. }
    
45. .pub_city_life_con DD A.citylife_d SPAN {
    
46. BACKGROUND-POSITION: -32px -115px
    
47. }
    
48. .pub_city_life_con DD A.citylife_e SPAN {
    
49. BACKGROUND-POSITION: -121px -115px
    
50. }
    
51. .pub_city_life_con DD A.citylife_f SPAN {
    
52. BACKGROUND-POSITION: -210px -112px
    
53. }

复制代码

3.  通过代码，大家也看到了，我们还需要在portal/images文件夹中放置一个topdm.gif文件，我在附件给大家一个图片作为测试使用，可以通过ps替换为你想要的图片，但是必须要通过position代码调整好位置哦！

4. 通过CSS代码可以修改鼠标移动效果背景，通过PS可以将图片替换成其他小图片，导航名称直接修改源代码文字；PS的使用方法，就不用我教了吧，不过有这方面问题可以跟帖留言，我尽力与大家解答。


偶穷人一个，觉得帖子不错的话，给个金币奖励一下吧，以后有好的教程，还会与大家分享！谢谢！(EM:140:)

导航图片源文件打包下载：

自己的沙发，自己坐，哈哈！

以后作为帮助更新帖

首页还要排版的

(EM:166:)(EM:166:)

很不错！谢谢分享！

嘿嘿，谢大家支持！