本帖最后由 51717531 于 2011-10-13 16:47 编辑
效果展示:
演示地址:
岳化网 www.yuehuawang.com
特色亮点:
1、不像常规的矩形的导航代码,本代码使用的是弧形的边框,很有美感;
2、代码中的链接鼠标移动都是可以变化颜色的,是用的纯css代码控制的,而不是js;
3、代码绿色干净,不与任何源代码冲突,可以放心使用!
使用方法:
1、上传图片到你想要上传的文件夹
2、在后台 - 运营- 广告 - 二级导航 添加以下代码
代码分享:
- <!--修改图片导航为具体的详细导航 by 5+7WorkRoom(work.jiaqih.com).0928 begin-->
- <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>
- <!--修改图片导航为具体的详细导航 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 |