本地通导航分享-精美实用-适合地方网站用

免费分享了。整理代码不容易，喜欢就顶顶

效果：
代码：(自己改好链接和文字说明放到自己网站合适的地方）

1. <link rel="stylesheet" type="text/css" href="bdt.css" />
   
2. <div class="tool">
   
3. <ul>
   
4. <li><a href="http://honghu.cc/topic-weather.html" target="_blank">天气</a></li>
   
5. <li><a href="＃" target="_blank">地图</a></li>
   
6. <li><a href="http://honghu.cc/article-774-1.html" target="_blank">出行</a></li>
   
7. <li><a href="＃" target="_blank">交违</a></li>
   
8. <li><a href="http://honghu.cc/forum.php?mod=forumdisplay&fid=16&filter=typeid&typeid=107" target="_blank">租房</a></li>
   
9. <li><a href="#" target="_blank">水费</a></li>
   
10. <li><a href="#" target="_blank">电费</a></li>
    
11. <li><a href="#" target="_blank">广告</a></li>
    
12. <li><a href="http://honghu.cc/forum-job-1.html" target="_blank">求职</a></li>
    
13. <li><a href="#" target="_blank">卖场</a></li>
    
14. <li><a href="#" target="_blank">建材</a></li>
    
15. <li><a href="http://honghu.cc/#" target="_blank">影楼</a></li>
    
16. <li><a href="http://honghu.cc/#" target="_blank">婚庆</a></li>
    
17. <li><a href="http://honghu.cc/article-775-1.html" target="_blank">餐饮</a></li>
    
18. <li><a href="http://honghu.cc/article-769-1.html" target="_blank">酒店</a></li>
    
19. <li><a href="http://honghu.cc/#" target="_blank">医院</a></li>
    
20. <li><a href="http://honghu.cc/#" target="_blank">KTV</a></li>
    
21. <li><a href="http://honghu.cc/#" target="_blank">影院</a></li>
    
22. <li><a href="http://honghu.cc/#" target="_blank">健身</a></li>
    
23. <li><a href="http://honghu.cc/forum-photo-1.html" target="_blank">摄影</a></li>
    
24. </ul>
    
25. </div>
    

复制代码

css代码：

1. @charset "gb2312";
   
2. /*2011-11-22 by www.honghu.cc*/
   
3. * {
   
4. padding:0;
   
5. margin:0;
   
6. }
   
7. html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, table, td, th, form, fieldset, img, dl, dt, dd, input, label {
   
8. margin:0;
   
9. padding:0;
   
10. }
    
11. 
    
12. /*工具箱*/
    
13. .tool {
    
14. width:910px;
    
15. height:63px;
    
16. float:left;
    
17. margin-top:8px;
    
18. _margin-top:2px;
    
19. background:url(../images/tool.jpg) no-repeat;
    
20. padding-left:50px;
    
21. padding-top:5px;
    
22. font-size:14px;
    
23. display:inline;
    
24. }
    
25. .tool ul {
    
26. width:910px;
    
27. height:50px;
    
28. float:left;
    
29. }
    
30. .tool li {
    
31. float:left;
    
32. }
    
33. .tool li a {
    
34. width:45px;
    
35. height:20px;
    
36. display:block;
    
37. text-align:center;
    
38. padding-top:35px;
    
39. text-decoration:none;
    
40. }
    
41. .tool li a:hover {
    
42. border:1px solid #ff6600;
    
43. }
    
44. /*便民活动*/
    

复制代码

漏了一个图片文件，补上

图片另存为电脑上ftp上传空间

打包一下，

有些图标可能不实用，可以自行PS换掉即可。 再分享几个小图标，抽空我再整理一些精致的小图标发上来。大家有好的素材不妨跟帖一并分享。




这个比较简约，转载一个别人分享也很好看的导航：
共享一个放在门户首页的品牌空间导航，喜欢就下吧
https://discuz.dismall.com/thread-2511585-1-1.html

占个广告位

真不知道，还有这么好心的楼主 支持

原则，先顶后看

你是不是给个图片链接
tool.jpg

很棒，支持一下了！

农业学大寨 发展新昔阳 http://www.xy0354.com

是比我的那个好看，呵呵

wyq8848 发表于 2011-11-22 15:20
原则，先顶后看

你是不是给个图片链接

不好意思漏掉了，现已补上并打包

laoa8 发表于 2011-11-22 15:29
是比我的那个好看，呵呵

我觉得你那个也好看，内容多一点，只是有部分图标重复和不符文字，重新ps一下就很不错了

{:soso_e113:}谢谢老乡 怎么安装呢

洪湖网 发表于 2011-11-22 16:07
不好意思漏掉了，现已补上并打包

反应速度很快嘛，賛一个