如何使用CSS制作天藍色導(dǎo)航菜單

這篇文章給大家分享的是有關(guān)如何使用CSS制作天藍色導(dǎo)航菜單 的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

我們先看最終效果：

第一步：放置一個div作為導(dǎo)航主體部分

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

為其編寫樣式：

CSS Code復(fù)制內(nèi)容到剪貼板

1. .userPlaceMain    

2. {   

3.     clear: both;   

4.     width:1200px  

5.     height: 50px;   

6.     line-height: 50px;   

7.     background: #0090CE;   

8.     padding: 0 20px;   

9.     color: White;   

10.     -moz-box-shadow: 5px 5px 10px #B7B7B7;   

11.     box-shadow: 5px 5px 10px #B7B7B7;   

12. }   

注意：此處-moz-box-shadow: 5px 5px 10px #B7B7B7;box-shadow: 5px 5px 10px #B7B7B7;為導(dǎo)航陰影部分

此時導(dǎo)航效果如下：

第二步：放置導(dǎo)航鏈接內(nèi)容

這里使用ul li無序列表

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <ul>  

2.      <li><a id="userPlaceId_1" href="#" class="userPlaceMainUlLiHover">主頁</a>|</li>  

3.      <li><a id="userPlaceId_2" href="#">形象展示</a>|</li>  

4.      <li><a id="userPlaceId_3" href="#">產(chǎn)品展示</a></li>  

5. </ul>  

現(xiàn)在需要將ul li向左浮動，使用：float:left

CSS Code復(fù)制內(nèi)容到剪貼板

1. .userPlaceMain ul li {   

2.    float: left;   

3.    margin-right: 10px;   

4.   

此時導(dǎo)航效果如下：

離我們最后的效果不遠了，還差設(shè)置鏈接文字寬度、背景、間隔

第二步：設(shè)置鏈接文字寬度、背景、間隔

由于a標(biāo)記為內(nèi)聯(lián)標(biāo)記，若需設(shè)置寬度需要使用其他處理方式，這里使用display:inline-block即可設(shè)置寬度

CSS Code復(fù)制內(nèi)容到剪貼板

1. .userPlaceMain ul li a    

2. {   

3.     text-shadow: 0 1px 0 rgba(0,0,0,0.3);   

4.     color: White;   

5.     display: inline-block;   

6.     width: 100px;   

7.     height: 100%;   

8.     font-size: 15px;   

9.     text-align: center;   

10.     margin-right: 10px;   

11. }   

注意：text-shadow: 0 1px 0 rgba(0,0,0,0.3);是為文字增加陰影，此項可不設(shè)置

此時導(dǎo)航效果如下：

現(xiàn)在效果好多了吧，還差最后一點處理，就是導(dǎo)航鼠標(biāo)滑動樣式

第三步：設(shè)置導(dǎo)航鼠標(biāo)滑動樣式

這里有兩種方式，一.直接使用css偽類選擇器:hover；二.javascript或者juqery控制鏈接文字css樣式，這里使用第一種，更加簡便

CSS Code復(fù)制內(nèi)容到剪貼板

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

最終效果如下：

感謝各位的閱讀！關(guān)于“如何使用CSS制作天藍色導(dǎo)航菜單 ”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！