Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[素材] 【原创】漂亮、css动态、 岳化网二级导航代码分享

[复制链接]
51717531 发表于 2011-10-13 16:42:57 | 显示全部楼层 |阅读模式
本帖最后由 51717531 于 2011-10-13 16:47 编辑

效果展示:





演示地址:

岳化网 www.yuehuawang.com

特色亮点:
1、不像常规的矩形的导航代码,本代码使用的是弧形的边框,很有美感;
2、代码中的链接鼠标移动都是可以变化颜色的,是用的纯css代码控制的,而不是js;
3、代码绿色干净,不与任何源代码冲突,可以放心使用!

使用方法:
1、上传图片到你想要上传的文件夹
2、在后台 - 运营- 广告 - 二级导航 添加以下代码



代码分享:



  1. <!--修改图片导航为具体的详细导航 by 5+7WorkRoom(work.jiaqih.com).0928 begin-->
  2. <style>
  3. /*修改导航为具体的导航 by 5+7WorkRoom(work.jiaqih.com) 0928*/
  4. #n1v .org{ color:#F60}
  5. #n1v .blue{ color:#6CF}
  6. #n1v a{ color: #666; text-decoration:none; font-size:14px; font-family:黑体,微软雅黑}
  7. #n1v a:hover{ color:#F90; text-decoration:none; font-family:黑体,微软雅黑}
  8. #n1v .nav_body{background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_body.gif) repeat-x;}
  9. #n1v .nav_end{ width:20px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_end.gif) no-repeat;}
  10. #n1v .product a{float:left; overflow: hidden; height: 56px; width:40px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_1_1.gif) no-repeat}
  11. #n1v .product a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_1_2.gif) no-repeat}
  12. #n1v .service a{float:left; overflow: hidden; height: 56px; width:40px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_2_1.gif) no-repeat}
  13. #n1v .service a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_2_2.gif) no-repeat}
  14. #n1v .fgk a{float:left; overflow: hidden; height: 56px; width:40px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_3_1.gif) no-repeat}
  15. #n1v .fgk a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_3_2.gif) no-repeat}
  16. #n1v .school a{float:left; overflow: hidden; height: 56px; width:40px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_4_1.gif) no-repeat}
  17. #n1v .school a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_4_2.gif) no-repeat}
  18. #n1v .forum a{float:left; overflow: hidden; height: 56px; width:40px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_5_1.gif) no-repeat}
  19. #n1v .forum a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_5_2.gif) no-repeat}
  20. </style>
  21. <div id="n1v">
  22. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  23. <tr>
  24. <td width="40" height="56" class="product"><a href="http://www.yuehuawang.com/forum.php"></a></td>
  25. <td align="center" valign="middle" class="nav_body"><a href="http://www.yuehuawang.com/forum-47-1.html"> 新闻</a> <a class="red" href="http://www.yuehuawang.com/product/download/"></a> <a href="http://www.yuehuawang.com/forum-77-1.html" class="org">在他乡</a> <a href="http://www.yuehuawang.com/forum-50-1.html">视频</a> <a href="http://www.yuehuawang.com/forum-49-1.html">文苑</a><br><a class="org" href="http://www.yuehuawang.com/forum-48-1.html">茶馆</a> <a href="http://www.yuehuawang.com/forum-78-1.html" class="blue">爱心帮 </a><a href="http://www.yuehuawang.com/forum-51-1.html">美图 </a> <a href="http://www.yuehuawang.com/forum-57-1.html">家庭</a></td>
  26. <td width="20" class="nav_end"> </td>
  27. <td width="40" class="service"><a href="http://www.yuehuawang.com/ask"></a></td>
  28. <td align="center" valign="middle" class="nav_body"><a href="http://www.yuehuawang.com/ask/solved/" > 已解决</a> <a href="http://www.yuehuawang.com/forum.php?mod=post&action=newthread&fid=38&special=3" class="org">提问题</a><br>
  29. <a href="http://www.yuehuawang.com/ask/questions/" class="blue">待解决</a> <a href="http://www.yuehuawang.com/misc.php?mod=ranklist&type=member&view=credit&orderby=4">达人榜</a></td>
  30. <td width="20" class="nav_end"> </td>
  31. <td width="40" class="fgk"><a href="http://www.yuehuawang.com/fangchan/"></a></td>
  32. <td align="center" valign="middle" class="nav_body"><a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=40&filter=typeid&typeid=78" class="org"> 出租</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=40&filter=typeid&typeid=79">合租</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=40&filter=typeid&typeid=82">新楼盘</a><br>
  33. <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=40&filter=typeid&typeid=79" class="blue">求租</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=40&filter=typeid&typeid=81">求购</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=40&filter=typeid&typeid=80">二手房</a></td>
  34. <td width="20" class="nav_end"> </td>
  35. <td width="40" class="school"><a href="http://www.yuehuawang.com/job/"></a></td>
  36. <td align="center" valign="middle" class="nav_body"><a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=45&filter=typeid&typeid=84" class="blue"> 求职</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=45&filter=typeid&typeid=83">招聘</a> <a href="http://www.yuehuawang.com/forum-46-1.html" class="org">找家教</a><br> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=45&filter=typeid&typeid=89">兼职</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=46&filter=typeid&typeid=28">培训</a> <a href="http://www.yuehuawang.com/forum.php?mod=forumdisplay&fid=46&filter=typeid&typeid=27">当老师</a></td>
  37. <td width="20" class="nav_end"> </td>
  38. <td width="40" class="forum"><a href="http://www.yuehuawang.com/"></a></td>
  39. <td align="center" valign="middle" class="nav_body"><a href="http://www.yuehuawang.com/home.php?mod=space&do=doing" class="org"> 微博</a> <a href="http://www.yuehuawang.com/home.php?mod=space&do=blog">日记</a> <a href="http://www.yuehuawang.com/home.php?mod=space&do=album">相册</a><br>
  40. <a href="http://www.yuehuawang.com/group.php?gid=67">班级</a> <a href="http://www.yuehuawang.com/group.php?mod=index" class="blue">圈子</a> <a href="http://www.yuehuawang.com/misc.php?mod=ranklist&type=member&view=credit">榜单</a></td>
  41. <td width="20" class="nav_end"> </td>
  42. </tr>
  43. </table>
  44. </div>
  45. <!--修改图片导航为具体的详细导航 by 5+7WorkRoom(work.jiaqih.com).0928 end-->
复制代码



图片打包:





卸载代码:
1、在后台暂停或删除添加的广告
2、删除图片文件即可

请您注意:
1、代码中图片地址使用的是“岳化网”的地址,建议您改成自己的网站的地址,防止因为网速不同步造成的图片加载缓慢!
2、代码中的链接地址请改成自己的哦。
3、代码中有我5+7工作室的版权申明,已经做了注释,可以删除!
4、本代码为原创代码,可以分享,但请注明出自“5+7工作室”
5、有任何的问题可以在此跟帖询问,或者取到我们
的论坛:http//work.jiaqih.com/forum.php

最后:
[5+7工作室]祝各位站长的流量飙升! 欢迎来我们的小站进行技术交流:http//work.jiaqih.com/forum.php

本帖与我站的该贴同步更新:
http//work.jiaqih.com/forum.php?mod=viewthread&tid=14

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
 楼主| 51717531 发表于 2011-10-13 16:43:43 | 显示全部楼层
发在DIY板块。从上午到现在都没人审核。伤心了。。发这里算了。。。打击积极性呀。。。
回复

使用道具 举报

404786069 发表于 2011-10-13 18:17:24 | 显示全部楼层
有创意  {:soso_e102:}
回复

使用道具 举报

818zzw 发表于 2011-10-13 18:19:24 | 显示全部楼层
不错啊!  http://www.818.cn/chongqing  重庆找工作
回复

使用道具 举报

wxyqm 发表于 2011-10-20 21:32:10 | 显示全部楼层
我喜欢!辛苦了楼主,我正在用http://wc2345.h006.996h.cn/portal.php{:soso__9005754593854283372_4:}
回复

使用道具 举报

寻诚科技 发表于 2011-10-21 23:46:55 | 显示全部楼层
有没有psd原图啊,分享一下哇。。。
回复

使用道具 举报

7#
无效楼层,该帖已经被删除
馨不了情 发表于 2011-10-23 01:14:58 | 显示全部楼层
Discuz!模板适用版本:Discuz! X2
语言编码:GBK简体  
风格转换者:仿制

风格全套价格:300元整。包7个频道 网站里面所有插件
包安装 升级  售后
演示站点:http://www.yooxi.net
销售QQ:154272257   加我时请注明DZ
让站长花最少的钱建最好的站
下面是演示图片:



回复

使用道具 举报

9#
无效楼层,该帖已经被删除
10#
无效楼层,该帖已经被删除
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-18 18:19 , Processed in 0.035156 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表