在使用了phpmywind企业源码一段时间后，用着感觉还是蛮不错的。这里呢，就为大家分享一下怎么更改phpmywind源码中导航条的颜色风格。也就是要更改css样式表。而今天要讲的重点也就是如何更改css样式表中导航条的风格。要更改样式表，我们首先就要找到该样式表的位置。

该样式表位置如下：

源码文件夹——templets文件夹——style文件夹——webstyle.css

打开webstyle.css 文件后，找到导航条代码位置，即头部区域。代码如下：

/*头部区域*/

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 #525252;}

.header .nav li{line-height:40px;float:left;border-right:1px solid #525252;}

.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文件夹下进行替换即可。(templets——images——default——nav_bg.png 替换即可)

2、 更改导航条颜色代码。请找到以下代码：

.header .nav{position:absolute;bottom:0;left:0;width:100%;height:40px;border-left:1px solid #525252;}

.header .nav li{line-height:40px;float:left;border-right:1px solid #525252;}

.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(和之前设的颜色需一致)

至此，导航条就更改成功了哦。

 

 

本文来自广州品牌网站建设网站设计公司-广帆互动