如何使用CSS制作天藍色導航菜單

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

我們先看最終效果：

第一步：放置一個div作為導航主體部分

XML/HTML Code復制內容到剪貼板

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

為其編寫樣式：

CSS Code復制內容到剪貼板

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;為導航陰影部分

此時導航效果如下：

第二步：放置導航鏈接內容

這里使用ul li無序列表

XML/HTML Code復制內容到剪貼板

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="#">產品展示</a></li>  

5. </ul>  

現在需要將ul li向左浮動，使用：float:left

CSS Code復制內容到剪貼板

1. .userPlaceMain ul li {   

2.    float: left;   

3.    margin-right: 10px;   

4.   

此時導航效果如下：

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

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

由于a標記為內聯標記，若需設置寬度需要使用其他處理方式，這里使用display:inline-block即可設置寬度

CSS Code復制內容到剪貼板

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);是為文字增加陰影，此項可不設置

此時導航效果如下：

現在效果好多了吧，還差最后一點處理，就是導航鼠標滑動樣式

第三步：設置導航鼠標滑動樣式

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

CSS Code復制內容到剪貼板

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

最終效果如下：

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