CSS first-level navigation-sky blue (with shadow), css sky blue

CSS first-level navigation-sky blue (with shadow), css sky blue

A bright navigation that can give the website an eye-catching effect. When guiding users to search for content, navigation can also change the mood of users to browse the website. browsing the website is also like a trip. The creative navigation bar will make users enjoy it more happily, increase your interest in the website.

I am not good at art production, but I can extract good parts from some beautiful websites for my own use and share them with others. Today, we have prepared a blue-sky navigation course for you to learn.

Let's look at the final result first:



Step 1: place a div as the navigation subject

<div class="userPlaceMain"></div>

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; is the navigation shadow part.

The navigation result is as follows:



Step 2: place the content of the navigation link

The ul li unordered list is used here.

<Ul> <li> <a id = "userPlaceId_1" href = "http://xunwn.com/1010100" class = "userPlaceMainUlLiHover"> Home </a> | </li> <a id = "userPlaceId_2" href = "http://xunwn.com"> Image Display </a> | </li> <a id = "userPlaceId_3" href = "http://xunwn.com/photo/1010100"> product display </a> </li> </ul>

Now we need to float ul li to the left and use: float: left

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

 

The navigation result is as follows:



It is not far from our final effect, and we have to set the link text width, background, and interval.

Step 2: Set the link text width, background, and interval

As a flag is an inline flag, if you need to set the width, you can set the width by using display: inline-block.

.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.3, 0,); it is used to add a shadow to the text. Do not set this option

The navigation result is as follows:



Now the effect is much better. The last point is the navigation and mouse sliding style.

Step 3: Set the navigation and mouse sliding Style

There are two methods: one is to directly use the css pseudo-class selector: hover; the other is to use javascript or juqery to control the link text css style. Here we use the first method, which is easier to use.

.userPlaceMain ul li a:hover{background: #0074A6;color:White; }

The final result is as follows:



I have always pursued simple fashion practices. I will share more things when I have time. Let's take a look at it. OK, thank you! Address: http://xunwn.com/tgzp/1010100_6751