网站地图    收藏   

主页 > 前端 > css教程 >

Phpmywind企业源码中导航条颜色更改教程 - html/cs

来源:自学PHP网    时间:2015-04-14 14:50 作者: 阅读:

[导读] 在使用了phpmywind企业源码一段时间后,用着感觉还是蛮不错的。这里呢,就为大家分享一下怎么更改phpmywind源码中导航条的颜色风格。也就是要更改css样式表。而今天要讲的重点也就是...

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

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

  本文由大码女装淘宝店(http://pangaa.com)站长原创,请尊重劳动者成果,转载请保留链接,谢谢!

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论