基于CSS制作天藍(lán)色導(dǎo)航菜單
我要評(píng)論一款亮麗的導(dǎo)航，能給網(wǎng)站一個(gè)畫龍點(diǎn)睛的作用。導(dǎo)航在指引用戶搜尋內(nèi)容時(shí)，還能改變用戶瀏覽網(wǎng)站的心情，瀏覽網(wǎng)站也像一場(chǎng)旅行，有創(chuàng)意的導(dǎo)航欄讓用戶欣賞起來(lái)也會(huì)更加愉悅，增加對(duì)網(wǎng)站的興趣。
本人不擅長(zhǎng)美工制作，不過可以從某些漂亮的網(wǎng)站中提取不錯(cuò)的部分為自己所用，也為他人分享。今天這里為大家準(zhǔn)備了一款天藍(lán)色導(dǎo)航一起學(xué)習(xí)。
我們先看最終效果：
第一步：放置一個(gè)div作為導(dǎo)航主體部分
- <div class="userPlaceMain"></div>
為其編寫樣式：
- .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;為導(dǎo)航陰影部分
此時(shí)導(dǎo)航效果如下：
第二步：放置導(dǎo)航鏈接內(nèi)容
這里使用ul li無(wú)序列表
- <ul>
- <li><a id="userPlaceId_1" href="#" class="userPlaceMainUlLiHover">主頁(yè)</a>|</li>
- <li><a id="userPlaceId_2" href="#">形象展示</a>|</li>
- <li><a id="userPlaceId_3" href="#">產(chǎn)品展示</a></li>
- </ul>
現(xiàn)在需要將ul li向左浮動(dòng)，使用：float:left
- .userPlaceMain ul li {
- float: left;
- margin-right: 10px;
此時(shí)導(dǎo)航效果如下：
離我們最后的效果不遠(yuǎn)了，還差設(shè)置鏈接文字寬度、背景、間隔
第二步：設(shè)置鏈接文字寬度、背景、間隔
由于a標(biāo)記為內(nèi)聯(lián)標(biāo)記，若需設(shè)置寬度需要使用其他處理方式，這里使用display:inline-block即可設(shè)置寬度
- .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);是為文字增加陰影，此項(xiàng)可不設(shè)置
此時(shí)導(dǎo)航效果如下：
現(xiàn)在效果好多了吧，還差最后一點(diǎn)處理，就是導(dǎo)航鼠標(biāo)滑動(dòng)樣式
第三步：設(shè)置導(dǎo)航鼠標(biāo)滑動(dòng)樣式
這里有兩種方式，一.直接使用css偽類選擇器:hover；二.javascript或者juqery控制鏈接文字css樣式，這里使用第一種，更加簡(jiǎn)便
- .userPlaceMain ul li a:hover{background: #0074A6;color:White; }
最終效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
css控制列表與導(dǎo)航的制作(水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)
這篇文章主要介紹了css控制列表與導(dǎo)航的制作,包括水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)聯(lián)列表、列表樣式等制作方法,需要的朋友可以參考下2014-04-15純CSS3單頁(yè)切換導(dǎo)航菜單界面設(shè)計(jì)的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)?lái)一篇純CSS3單頁(yè)切換導(dǎo)航菜單界面設(shè)計(jì)的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-16
jQuery和CSS3實(shí)現(xiàn)的漢堡包導(dǎo)航菜單打開動(dòng)畫特效源碼
jQuery和CSS3實(shí)現(xiàn)的漢堡包導(dǎo)航菜單打開動(dòng)畫特效源碼是一段實(shí)現(xiàn)了用戶點(diǎn)擊漢堡包圖標(biāo)時(shí)，圖標(biāo)以彈性變形的方式水平展開。整個(gè)動(dòng)畫的特點(diǎn)是彈性十足2016-07-12- 這篇文章主要告訴大家如何打造最美CSS多級(jí)下拉橫向?qū)Ш讲藛涡Ч?，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-27
純js和CSS3媒體查詢制作簡(jiǎn)單的響應(yīng)式導(dǎo)航菜單特效源碼
這是一個(gè)使用純js和CSS3媒體查詢制作的簡(jiǎn)單的響應(yīng)式導(dǎo)航菜單效果的代碼。當(dāng)視口小于760像素時(shí)，菜單會(huì)收縮為隱藏的漢堡包菜單，類似bootstrap導(dǎo)航菜單2016-05-26
CSS3+jQuery實(shí)現(xiàn)6種移動(dòng)手機(jī)導(dǎo)航菜單UI設(shè)計(jì)特效源碼
本特效源碼是一組效果很酷的移動(dòng)手機(jī)導(dǎo)航菜單UI設(shè)計(jì)效果的代碼。這組手機(jī)導(dǎo)航菜單設(shè)計(jì)共有6種不同的效果，歡迎下載試試吧2016-03-16
CSS3實(shí)現(xiàn)創(chuàng)意鼠標(biāo)經(jīng)過導(dǎo)航菜單特效源碼
CSS3實(shí)現(xiàn)創(chuàng)意鼠標(biāo)經(jīng)過導(dǎo)航菜單特效源碼是一款通過CSS3 transform和transition方法實(shí)現(xiàn)的，非常簡(jiǎn)單，需要的朋友前來(lái)下載源碼2016-03-14
CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS設(shè)置列表樣式和創(chuàng)建導(dǎo)航菜單實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-07-24
