欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于CSS制作天藍(lán)色導(dǎo)航菜單

  發(fā)布時(shí)間：2016-03-08 14:25:52   作者：佚名   我要評論
這篇文章主要介紹了基于CSS制作天藍(lán)色導(dǎo)航菜單 ，效果非常清新，時(shí)尚大方，為網(wǎng)站增添亮點(diǎn)，感興趣的小伙伴們可以參考一下

一款亮麗的導(dǎo)航，能給網(wǎng)站一個(gè)畫龍點(diǎn)睛的作用。導(dǎo)航在指引用戶搜尋內(nèi)容時(shí)，還能改變用戶瀏覽網(wǎng)站的心情，瀏覽網(wǎng)站也像一場旅行，有創(chuàng)意的導(dǎo)航欄讓用戶欣賞起來也會(huì)更加愉悅，增加對網(wǎng)站的興趣。

本人不擅長美工制作，不過可以從某些漂亮的網(wǎng)站中提取不錯(cuò)的部分為自己所用，也為他人分享。今天這里為大家準(zhǔn)備了一款天藍(lán)色導(dǎo)航一起學(xué)習(xí)。

我們先看最終效果：

第一步：放置一個(gè)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)航陰影部分

此時(shí)導(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向左浮動(dòng)，使用：float:left

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .userPlaceMain ul li {   
  2.    float: left;   
  3.    margin-right: 10px;   
  4.   

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

離我們最后的效果不遠(yuǎn)了，還差設(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);是為文字增加陰影，此項(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樣式，這里使用第一種，更加簡便

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .userPlaceMain ul li a:hover{background: #0074A6;color:White; }   

最終效果如下：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評論