How CSS implements shaded, first-level navigation

A beautiful navigation, can give the site a finishing touch role. Navigation in the guidance of users to search for content, but also to change the mood of users to browse the site, browse the site is like a trip, the creative navigation bar for users to enjoy the more enjoyable, increase interest in the site.

I am not good at art production, but can be from some beautiful sites to extract good parts for their own use, but also for others to share. Today we have a sky-blue navigation for everyone to learn together.

Let's start by looking at the final effect:



First step: Place a p as the navigation body part

<p class= "Userplacemain" ></p>

Write a style for it:

. userplacemain {    clear:both;    width:1200px    height:50px;    line-height:50px;    Background: #0090CE;    padding:0 20px;    Color:white;    -moz-box-shadow:5px 5px 10px #B7B7B7;    box-shadow:5px 5px 10px #B7B7B7;}

Note: here -moz-box-shadow:5px 5px 10px #B7B7B7; box-shadow:5px 5px 10px #B7B7B7; To navigate the shaded section

At this point the navigation effect is as follows:



Step Two: Place navigation link content

Here use UL Li unordered list

<ul>     <li><a id= "userplaceid_1" href= "http://xunwn.com/1010100" class= "Userplacemainullihover" > Home </a>|</li>     <li><a id= "userplaceid_2" href= "http://xunwn.com" > Image display </a>| </li>     <li><a id= "userplaceid_3" href= "http://xunwn.com/photo/1010100" > Products </a></ Li></ul>

Now you need to float UL Li to the left, using: Float:left

. Userplacemain ul li {    float:left;    margin-right:10px;}

At this point the navigation effect is as follows:



It's not far from our final effect. Set the link text width, background, interval

Step Two: Set the link text width, background, interval

Because the a tag is an inline tag, if you need to set the width to use a different processing method, you can use Display:inline-block to set the width

. Userplacemain ul Li a {    text-shadow:0 1px 0 rgba (0,0,0,0.3);    Color:white;    Display:inline-block;    width:100px;    height:100%;    font-size:15px;    Text-align:center;    margin-right:10px;}

Note: text-shadow:0 1px 0 rgba (0,0,0,0.3); To add a shadow to the text, this item is not set

At this point the navigation effect is as follows:



Now the effect is much better, the last point of processing, is the navigation mouse sliding style

Step three: Set the navigation mouse slide style

There are two ways, one: directly using the CSS pseudo-class selector: hover; II: JavaScript or Juqery control the link text CSS style, here to use the first type, more convenient

. Userplacemain ul Li A:hover{background: #0074A6; color:white;}

The final effect is as follows: