Phpmywind企业源码中导航条颜色更改教程
在使用了phpmywind企业源码一段时间后，用着感觉还是蛮不错的。这里呢，就为大家分享一下怎么更改phpmywind源码中导航条的颜色风格。也就是要更改css样式表。而今天要讲的重点也就是如何更改css样式表中导航条的风格。要更改样式表，我们首先就要找到该样式表的位置。该样式表位置如下：
源码文件夹templets文件夹style文件夹
打开 文件后，找到导航条代码位置，即头部区域。代码如下：
/*头部区域*/
body{background:url(../images/default/nav_bg.png) repeat-x 0 84px;}
.header{width:890px;height:124px;margin:0 auto 25px auto;position:relative;z-index:1;}
.header h1{width:300px;height:60px;float:left;margin:14px 0 0 5px;}
.header h1.logo{background:url(../images/default/logo.png) no-repeat;}
.header .txt{position:absolute;top:18px;right:45px;color:#dfdfdf;_display:inline-block;}
.header .txt span{padding:0 10px;}
.header .tel{position:absolute;top:50px;right:16px;height:14px;line-height:14px;padding-left:70px;background:url(../images/default/tel_txt.png) no-repeat;text-align:center;font-family:Verdana;font-size:14px;color:#8d8c8c;}
.header .nav{position:absolute;bottom:0;left:0;width:100%;height:40px;border-left:1px solid #;}
.header .nav li{line-height:40px;float:left;border-right:1px solid #;}
.header .nav li a{display:block;width:102px;height:40px;background:url(../images/default/nav_li.png) no-repeat 0 1px;text-align:center;font-size:14px;font-weight:bold;color:#f3f3f3;}
.header .nav li a:hover, .header .nav li a:hover.on{background:#1c1c1c;text-decoration:none;}
.header .nav li a.on{background:url(../images/default/nav_li_on.png) no-repeat 0 1px;}
.header .nav li a.on2{background:#1c1c1c;text-decoration:none;}
.header .nav li:hover.on{background:#1c1c1c;text-decoration:none;}
.header .nav li ul{display:none;position:absolute;}
.header .nav li ul li{float:none;display:block;position:relative;line-height:20px;_display:inline;}
.header .nav li ul li .s{position:absolute;top:0;left:140px;border-left:1px solid transparent;}
.header .nav li ul li .s li{float:none;}
.header .nav li ul li a{display:block;width:120px;height:20px;padding:4px 0 4px 20px;background:#1c1c1c;text-align:left;font-weight:normal;font-size:12px;color:#ccc;}
.header .nav li ul li a:hover{background:#1c1c1c;color:#f10000;}
.header .nav .t{background:url(../images/default/nav_ico.gif) no-repeat 120px center #1c1c1c;}
找出位置之后，就可以开始更改了。步骤如下：
1、 更改头部背景导航条图片。
body{background:url(../images/default/nav_bg.png) repeat-x 0 84px;}
请事先做好一张背景图。大小为1*65 px。默认的背景条是上黑下白。高度65像素，宽度1像素。我们在制作的时候可以ps制作。上下各占40 25或者35 30 上部分的主要是留作导航条背景高度。一般来说，35-40像素高就差不多了。确定好背景色图片后，请记下导航背景条上部分的颜色代码。假设为黑色：#000000。留作后用。图片做好后请在images文件夹下进行替换即可。(templetsimagesdefaultnav_bg.png 替换即可)
2、 更改导航条颜色代码。请找到以下代码：
.header .nav{position:absolute;bottom:0;left:0;width:100%;height:40px;border-left:1px solid #;}
.header .nav li{line-height:40px;float:left;border-right:1px solid #;}
.header .nav li a{display:block;width:102px;height:40px;background:url(../images/default/nav_li.png) no-repeat 0 1px;text-align:center;font-size:14px;font-weight:bold;color:#f3f3f3;}
.header .nav li a:hover, .header .nav li a:hover.on{background:#1c1c1c;text-decoration:none;}
.header .nav li a.on{background:url(../images/default/nav_li_on.png) no-repeat 0 1px;}
.header .nav li a.on2{background:#1c1c1c;text-decoration:none;}
.header .nav li:hover.on{background:#1c1c1c;text-decoration:none;}
.header .nav li ul{display:none;position:absolute;}
.header .nav li ul li{float:none;display:block;position:relative;line-height:20px;_display:inline;}
.header .nav li ul li .s{position:absolute;top:0;left:140px;border-left:1px solid transparent;}
.header .nav li ul li .s li{float:none;}
.header .nav li ul li a{display:block;width:120px;height:20px;padding:4px 0 4px 20px;background:#1c1c1c;text-align:left;font-weight:normal;font-size:12px;color:#ccc;}
.header .nav li ul li a:hover{background:#1c1c1c;color:#f10000;}
.header .nav .t{background:url(../images/default/nav_ico.gif) no-repeat 120px center #1c1c1c;}
更改如下：
1、.header .nav li a中更改导航条背景图片。将background:url(../images/default/nav_li.png)更改为：background:#000000(按之前的背景导航条颜色设定。颜色需一致)
2、.header .nav li a:hover, .header .nav li a:hover.on{background:#1c1c1c;text-decoration:none;}
其中background:#1c1c1c更改为自己想要的划过导航时显示的颜色。这里假设为红色。#ff0000。
3、.header .nav li a.on{background:url(../images/default/nav_li_on.png) no-repeat 0 1px;}
.header .nav li a.on2{background:#1c1c1c;text-decoration:none;}
.header .nav li:hover.on{background:#1c1c1c;text-decoration:none;}
三个背景色都改为：background:#000000(和之前设的颜色需一致)
4、.header .nav li ul li a{display:block;width:120px;height:20px;padding:4px 0 4px 20px;background:#1c1c1c;text-align:left;font-weight:normal;font-size:12px;color:#ccc;}
背景色都改为：background:#000000(和之前设的颜色需一致)
5、.header .nav li ul li a:hover{background:#1c1c1c;color:#f10000;}
背景色都改为：background:#ff0000(和之前设的划过颜色需一致)
6、.header .nav .t{background:url(../images/default/nav_ico.gif) no-repeat 120px center #1c1c1c;}
背景色都改为：background:#000000(和之前设的颜色需一致)
至此，导航条就更改成功了哦。
本文由大码女装淘宝店()站长原创，请尊重劳动者成果，请保留链接，谢谢!
页:
[1]