日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
CSS3制作Windows7開始菜單

我對使用少量CSS3代碼來實現(xiàn)很多效果這一過程非常的著迷，很多UI元素都需要用圖片來展示其漂亮的外觀，但是你可能不知道，單純的CSS3代碼也是可以實現(xiàn)的。下面我就用純CSS3來制作Windows 7開始菜單（額外需要幾個小圖標），從而來證明這個觀點。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名注冊、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、乳山網(wǎng)站維護、網(wǎng)站推廣。

如果我們分解這個Windows 7開始菜單，我們會得到1個div，2個ul列表，1組鏈接以及一些icon小圖標，我們可以一起來看看具體的效果。下面是簡單的制作過程及部分代碼

菜單容器（Container）

這個容器命名為startmenu ，里面包含了2個ul列表。同時用3種顏色實現(xiàn)線性漸變：頂部是淺藍色，中間是深藍色，底部是接近淺藍色的其他顏色。接著用rgba()實現(xiàn)透明度，rgba()有四個參數(shù)，前3個表示紅、綠、藍，第4個表示透明度，兩條邊線使用了box-shadow屬性。

 
 
 
      
  
  
  1. #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;   
    2.   
  
  
  2.              -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;   
    3.   
  
  
  3.              box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;   
    4.   
  
  
  4.              background-color:#619bb9;   
    5.   
  
  
  5.              background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));   
    6.   
  
  
  6.              background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); } 
    7.

程序菜單（Programs Menu）

這是一個白色背景的ul列表，兩條邊線用了border和box-shadow屬性。程序鏈接包含了幾個小圖標以及程序名稱，同時做了一個鼠標滑過漸變投影的效果。

 
 
 
      
  
  
  1. #programs, #links {float:left; display:block; padding:0; list-style:none;}   
    2.   
  
  
  2. #programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;   
    3.   
  
  
  3.             box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;   
    4.   
  
  
  4.             -moz-border-radius:3px;-webkit-border-radius:3px;}   
    5.   
  
  
  5. #programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;   
    6.   
  
  
  6.               color:#4b4b4b; text-decoration:none; min-width:220px;}   
    7.   
  
  
  7. #programs a:hover {border:solid 1px #7da2ce;   
    8.   
  
  
  8.              -moz-border-radius:3px; -webkit-border-radius:3px;   
    9.   
  
  
  9.              box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;   
    10.   
  
  
  10.              background-color:#cfe3fd;   
    11.   
  
  
  11.              background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);   
    12.   
  
  
  12.              background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}   
    13.   
  
  
  13. #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}  
    14.

鏈接菜單（Link Menu）

上面提到的鏈接菜單非常簡單，但是這里我們可以做出更炫的鼠標滑過效果。每一個鏈接菜單都有3種顏色的水平漸變：左邊和右邊是深藍色，中間用稍微淡一點的藍色。現(xiàn)在，不像程序菜單中的鏈接那樣，這個鏈接內(nèi)部用來包含菜單的文字，同時span元素還擁有多種垂直線性漸變。

 
 
 
      
  
  
  1. #links {margin:7px; margin-top:-30px;}   
    2.   
  
  
  2. #links li.icon {text-align:center;}   
    3.   
  
  
  3. #links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;   
    4.   
  
  
  4.               color:#fff; text-decoration:none; min-width:120px;}   
    5.   
  
  
  5. #links a:hover {border:solid 1px #000;   
    6.   
  
  
  6.              -moz-border-radius:3px; -webkit-border-radius:3px;   
    7.   
  
  
  7.              box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;   
    8.   
  
  
  8.              background-color:#658da0;   
    9.   
  
  
  9.              background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));   
    10.   
  
  
  10.              background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));   
    11.   
  
  
  11.              }   
    12.   
  
  
  12. #links a span { padding:5px; display:block; }   
    13.   
  
  
  13. #links a:hover span  { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));   
    14.   
  
  
  14.             background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),   
    15.   
  
  
  15.             color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); } 
    16.

下面是效果截圖，你也可以去看在線示例和下載源碼

這個CSS3制作的Windows 7開始菜單例子可以在Firefox 3.6+, Safari 和 Chrome瀏覽器中運行，Opera和IE中的效果就不行了，也許我可以繼續(xù)優(yōu)化一下，歡迎大家提出建議和意見。


當前題目：CSS3制作Windows7開始菜單
文章路徑：http://www.dlmjj.cn/article/cdijeep.html