css如何實現帶有陰影的一級導航

一款亮麗的導航，能給網站一個畫龍點睛的作用。導航在指引用戶搜尋內容時，還能改變用戶瀏覽網站的心情，瀏覽網站也像一場旅行，有創意的導覽列讓用戶欣賞起來也會更加愉悅，增加對網站的興趣。

本人不擅長美工製作，不過可以從某些漂亮的網站中提取不錯的部分為自己所用，也為他人分享。今天這裡為大家準備了一個天藍色導航一起學習。

我們先看最終效果：



第一步：放置一個p作為導覽主體部分

<p class="userPlaceMain"></p>

為其寫樣式：

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

 

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

##此時導覽效果如下：



#第二步：放置導覽連結內容

這裡使用ul li無序列表

#

<ul>
     <li><a id="userPlaceId_1" href="http://xunwn.com/1010100" class="userPlaceMainUlLiHover">主页</a>|</li>
     <li><a id="userPlaceId_2" href="http://xunwn.com">形象展示</a>|</li>
     <li><a id="userPlaceId_3" href="http://xunwn.com/photo/1010100">产品展示</a></li></ul>

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

#

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

 

#此時導航效果如下：



#離我們最後的效果不遠了，還差設定連結文字寬度、背景、間隔

#第二步：設定連結文字寬度、背景、間隔

由於a標記為內嵌標記，若需設定寬度需要使用其他處理方式，這裡使用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;
}

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

此時導航效果如下：


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

第三個步驟：設定導航滑鼠滑動樣式

這裡有兩種方式，一：直接使用css偽類別選擇器:hover；二：javascript或juqery控制連結文字css樣式，這裡使用第一種，更簡單

#

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

##最終效果如下：



# 

###

以上是css如何實現帶有陰影的一級導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！