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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[发布] Discuz! X通用经典简约二级导航

[复制链接]
xuzihua219 发表于 2014-8-4 20:54:55 | 显示全部楼层 |阅读模式
经典二级导航

演示如图:





有些站友可能会问到,之前就有这个的。回答:是的,之前的确有这个导航,但是那是用TABLE代码写的,下面分享的是用div+css写的,对于代码的优化来说,这都懂的!

演示地址:http://www.i027.com
  1. <style>
  2. .nav_menu{ width:953px; padding:5px 0 5px 5px; margin:0 auto; overflow:hidden; background:#f8f8f8; color:#999; border:1px solid #dfdfdf; border-top:none;}
  3. .nav_menu ul li{ line-height:24px;}
  4. .nav_menu ul li a{ margin:0 3px;}
  5. .nav_menu1{ background:url({IMGDIR}/nav_pd.gif) no-repeat left 2px; padding:0 10px 0 35px; float:left;}
  6. .nav_bm{ background:url({IMGDIR}/nav_bm.gif) no-repeat left 2px;}
  7. .nav_lt{ background:url({IMGDIR}/nav_lt.gif) no-repeat left 2px;}
  8. .nav_hy{ background:url({IMGDIR}/nav_hy.gif) no-repeat left 2px;}
  9. </style>

  10. <div class="nav_menu">
  11.                     <div class="nav_menu1">
  12.                         <ul>
  13.                             <li>
  14.                             <a ><b>爱车一族</b></a> | <a ><font color='#E11'>购物达人</font></a> | <a >家居装修</a>
  15.                             </li>
  16.                              <li>
  17.                             <a ><b>综艺娱乐</b></a> | <a ><font color='#E11'>游山玩水</font></a> | <a >数码通讯</a>
  18.                             </li>
  19.                         </ul>
  20.                     </div>
  21.                     <div class="nav_menu1 nav_lt">
  22.                         <ul>
  23.                             <li>
  24.                             <a ><b>武汉新闻</b></a> | <a ><font color='#E11'>谈天说地</font></a> | <a >商业信息</a>
  25.                             </li>
  26.                              <li>
  27.                             <a ><b>爆料趣闻</b></a> | <a ><font color='#E11'>电话号码</font></a> | <a >求职招聘</a>
  28.                             </li>
  29.                         </ul>
  30.                     </div>
  31.                     <div class="nav_menu1 nav_bm">
  32.                         <ul>
  33.                             <li>
  34.                             <a ><b>便民信息</b></a> | <a ><font color='#E11'>生活百科</font></a> | <a >男婚女嫁</a>
  35.                             </li>
  36.                              <li>
  37.                             <a ><b>健康养身</b></a> | <a ><font color='#E11'>妈妈宝宝</font></a> | <a >情感驿站</a>
  38.                             </li>
  39.                         </ul>
  40.                     </div>
  41.                     <div class="nav_menu1 nav_hy">
  42.                         <ul>
  43.                             <li>
  44.                             <a ><b>江城美食</b></a> | <a ><font color='#E11'>商场专卖</font></a> | <a >武汉团购</a>
  45.                             </li>
  46.                              <li>
  47.                             <a ><b>江城楼市</b></a> | <a ><font color='#E11'>宠物花草</font></a> | <a >幽默笑话</a>
  48.                             </li>
  49.                         </ul>
  50.                     </div>
  51.                                 </div>
复制代码



导航图片已经打包,直接下载,放到

安装方法1:将上面代码拷贝在后台 - 运营 - 站点广告 ,选择二级导航广告位,以HTML代码广告形式。

安装方法2:将上面代码拷贝在 当然模板 - header.htm文件 “<div id="mu" class="cl">”这行代码之上;

说明:请将压缩包内图片放在当前图片存放目录内。懂的可以自行改路径。

注意:
当前使用的是953px宽度,如需更改为980px或者其他,请修改css进行。

演示地址:http://www.i027.com

本帖子中包含更多资源

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

x
 楼主| xuzihua219 发表于 2014-8-5 11:20:48 | 显示全部楼层
有喜欢的求支持顶起来啊!

难道就没人喜欢这种风格的导航么?







www.56ads.com
回复

使用道具 举报

 楼主| xuzihua219 发表于 2014-8-6 09:06:59 | 显示全部楼层
鄙视只下载不顶的人
回复

使用道具 举报

 楼主| xuzihua219 发表于 2014-8-7 16:19:09 | 显示全部楼层
www.900yi.com 有没有交换连接的!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

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

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

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