导航栏美化素材By股权网 Yespe.com

  首先~大家需要确定一下是否需要一个100%长度的导航栏目，这是前提，如果你有这样的需求，再继续向下看吧{:soso_e100:}
  先上图片


当然，如果你愿意的话，可以访问股权网查看实际效果哦  http://www.yespe.com
接下来是教程和素材，由于涉及修改的文件涵盖 css 样式，请在修改之前备份
来自群组: 地方门户

有素材就留着等用的时候找你

找到你对应风格的文件夹下commom/extend_common.css 文件加入以下样式

/* 导航 */
#diy-tg_menu li a{ color:#333333}

#hd{ background-color:#FFFFFF}
#toptb{ border-bottom:1px solid #DCDCDC; background:url({STYLEIMGDIR}/bottom-bg.png) repeat scroll 0 0 #F1F1F1; height:32px; line-height:32px;}
#toptb a{ color:#555555; padding:0px 5px; text-decoration:none;}
#toptb a:hover{ color:#0086F8;}
#toptb li{ float:left; list-style:none;}
.xinyun_nav{border-bottom:solid 1px #2e86b6; line-height:48px;height:48px;background-color:#39a7e4;min-width:960px;}
.qq2 {
    background: url({STYLEIMGDIR}/qq-weibo.png) no-repeat scroll 0px 8px transparent;
    color: #333333;
    display: inline-block;
    height: 25px;
        padding-left:18px;
}

#nv{  height:48px;line-height:48px; margin:0 auto; background-image:none; background-repeat:repeat-x; height:48px;background-color:#39a7e4;width:960px;}
#nv li{height:48px; line-height:48px;  background-attachment: scroll;
    background-image: none;
    background-position: right center;
    background-repeat: no-repeat;
    float: left;
    height: 48px;
    list-style-type: none;
    padding-right: 2px;
    width: auto;}
#nv li.a, #nv li.hover a{ margin-left:0px;
background-color:#2D86B6;
background-image:none;
}
#nv li#mn_portal{border-left:0px solid #ccc;}
#nv li a{ color: #FFFFFF;
    display: block;
    font-family: "Hiragino Sans GB","WenQuanYi Micro Hei","微软雅黑",Arial;
    font-size: 15px;
    font-weight: bold;
    height: 48px;
    line-height: 48px;
    overflow: hidden;
    padding-left: 22px;
    padding-right: 22px;
    text-decoration: none;
    width: auto; background:none; }
#nv li a:hover, #nv li.a:hover,  #nv li.hover a:hover{ background: url(menubar-hover.gif) repeat scroll 0 0 #63baea;text-decoration:none; color:#FFFFFF; margin-left:0px; }
#qmenu{ background:none repeat scroll 0 0 #0086f8;line-height: 28px;text-align: center;width: 100px; margin:0px; height:28px; color:#FFFFFF; font-weight:normal; font-size:14px; padding-right:0px;border-radius:3px; margin:12px;}

将压缩包的文件上传到common文件夹下~更新缓存，OK{:soso_e100:} 有钱的点这个

没钱的点这个

一看代码就知道是水的模板

谢谢大家的支持

我的网站是搞股票方面，楼主的是做PE

loveformula210 发表于 2013-9-22 22:53
我的网站是搞股票方面，楼主的是做PE

可以友链吗？

股权网已经改名为投资世界 www.Yespe.com 谢谢大家的支持