Phpmywind navigation bar Color change tutorial in enterprise source code

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

In the use of Phpmywind Enterprise source code for some time, with the feeling is pretty good. Here, for you to share how to change the Phpmywind source code in the color style of the navigation bar. That is, to change the CSS style sheet. The focus today is on how to change the style of the navigation bar in a CSS style sheet. To change the style sheet, we first need to find the location of the style sheet.

The style sheet is located as follows:

Source folder--templets folder--style folder--webstyle.css

After opening the Webstyle.css file, locate the navigation bar code location, which is the header area. The code is as follows:

/* Head Area * *

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 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;

Once you have located the location, you can begin to change it. The steps are as follows:

1, change the head background navigation bar picture.

Body{background:url (. /images/default/nav_bg.png) repeat-x 0 84px;

Please do a background picture beforehand. Size is 1*65 px. The default background bar is black and white. Height 65 pixels, Width 1 pixels. We can make PS when making. Up and down each accounted for 40 25 or 35 30 of the main part is left as the navigation bar background height. In general, 35-40 Pixel is almost the same. After you've determined the background color picture, make a note of the colour code on the section on the navigation bar. Assumed to be black: #000000. reserved for later use. After the picture is done, please replace it in the Images folder. (Templets--images--default--nav_bg.png Replace)

2, change the navigation bar color code. Please find the following code:

. 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 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;

The changes are as follows:

1. header. Nav Li a changes the navigation bar background picture. The Background:url (... /images/default/nav_li.png) changed to: Background: #000000 (set by previous background navigation bar color. Color should be consistent)

2. header. Nav li A:hover,. Header nav Li A:hover.on{background: #1c1c1c; text-decoration:none;}

Among them background: #1c1c1c更改为自己想要的划过导航时显示的颜色. This is assumed to be red. #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;}

Three background colors are changed to: background: #000000 (same color as before)

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;

The background color is changed to: background: #000000 (same color as before)

5. header. Nav Li ul li a:hover{background: #1c1c1c; color: #f10000;}

The background color is changed to: background: #ff0000 (and the previous set across the color need to be consistent)

6. Header nav. T{background:url. /images/default/nav_ico.gif) no-repeat 120px Center #1c1c1c;

The background color is changed to: background: #000000 (same color as before)

At this point, the navigation bar changed successfully oh.

This article by the big Code women Taobao Shop (http://pangaa.com) Webmaster Original, please respect the results of the workers, reproduced please keep the link, thank you!