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

基于CSS制作天藍色導航菜單

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

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

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

我們先看最終效果：

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

XML/HTML Code復制內(nèi)容到剪貼板
  1. <div class="userPlaceMain"></div>  

為其編寫樣式：

CSS Code復制內(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;為導航陰影部分

此時導航效果如下：

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

這里使用ul li無序列表

XML/HTML Code復制內(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復制內(nèi)容到剪貼板
  1. .userPlaceMain ul li {   
  2.    float: left;   
  3.    margin-right: 10px;   
  4.   

此時導航效果如下：

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

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

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

CSS Code復制內(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àn)在效果好多了吧，還差最后一點處理，就是導航鼠標滑動樣式

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

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

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

最終效果如下：

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

相關文章

最新評論