漂亮、css动态、岳化网二级导航代码分享

51717531 · 发表于 2011-10-13 11:58:39

本帖最后由 51717531 于 2011-10-17 17:33 编辑

效果展示：

演示地址：
岳化网 www.yuehuawang.com

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

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

代码分享：

<style>
/*修改导航为具体的导航 by 5+7WorkRoom(work.jiaqih.com) 0928*/
#n1v .org{ color:#F60}
#n1v .blue{ color:#6CF}
#n1v a{ color: #666; text-decoration:none; font-size:14px; font-family:黑体,微软雅黑}
#n1v a:hover{ color:#F90; text-decoration:none; font-family:黑体,微软雅黑}
#n1v .nav_body{background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_body.gif) repeat-x;}
#n1v .nav_end{ width:20px; background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_end.gif) no-repeat;}
#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}
#n1v .product a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_1_2.gif) no-repeat}
#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}
#n1v .service a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_2_2.gif) no-repeat}
#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}
#n1v .fgk a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_3_2.gif) no-repeat}
#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}
#n1v .school a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_4_2.gif) no-repeat}
#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}
#n1v .forum a:hover { background:url(http://www.yuehuawang.com/static/image/yuehua/header_nav/nav_5_2.gif) no-repeat}
</style>
<div id="n1v">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="40" height="56" class="product"><a href="http://www.yuehuawang.com/forum.php"></a></td>
<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>
<td width="20" class="nav_end"> </td>
<td width="40" class="service"><a href="http://www.yuehuawang.com/ask"></a></td>
<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>
<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>
<td width="20" class="nav_end"> </td>
<td width="40" class="fgk"><a href="http://www.yuehuawang.com/fangchan/"></a></td>
<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>
<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>
<td width="20" class="nav_end"> </td>
<td width="40" class="school"><a href="http://www.yuehuawang.com/job/"></a></td>
<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>
<td width="20" class="nav_end"> </td>
<td width="40" class="forum"><a href="http://www.yuehuawang.com/"></a></td>
<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>
<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>
<td width="20" class="nav_end"> </td>
</tr>
</table>
</div>

复制代码

图片打包：

卸载代码：
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

chenliang0104 · 发表于 2011-10-15 16:39:59

恩，蛮好的。谢谢分享

sz108net · 发表于 2011-10-15 20:31:48

谢谢分享的哦蛮好的哦！

Nineteen_Hun · 发表于 2011-10-16 23:10:13

不错，支持了

fuckgao · 发表于 2011-10-17 10:59:11

不错

cqbaobao · 发表于 2011-10-20 11:39:15

帮你顶下，虽然不用呢。

66gold · 发表于 2011-10-21 02:18:53

谢谢分享。。。。。。。。。。。。。。。

J16988 · 发表于 2011-11-1 00:54:39

谢谢分享

esdjz · 发表于 2011-11-9 19:03:17

我来看看！

		自动登录	找回密码
密码			立即注册

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

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