基於css3仿造window7的開始選單

相當逼真，css3果然強悍。

友情提示：請勿在ie下瀏覽。

來看下原作者的設計草圖：

簡明建立過程

第一步 ：建立如下選單結構

複製**

**如下:

程式設計客棧

div>

win7的開始選單有二個部分，左側程式選單，右側系統選單。

第二步：選單容器css

複製**

**如下:

#www.cppcns.comstartmenu

有幾個關注的點,可以留意下：

-moz-border-radius:5px;-webkit-border-radius:5px;圓角效果，這是css3中應用最廣的

box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;陰影效果

background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));漸變背景

第三步：選單左側部分的css

複製**

**如下:

#programs

#programs a

#programs a:hover

#programs a img

這裡值得留意的是滑鼠經過選單項的效果設定，也就是#programs a:hover裡的樣式，這是難點，也是css3的強大之處，依舊是圓角、陰影、漸變背景。

第四步：選單右側的css部分

複製**

**如下:

#links

#links li.icon

#links a

#links a:hover

#links a span

#links a:hover span

要留意的點依舊是哪幾項，難點在於細節的微調，尤其是漸變背景的製作，css3中非常靈活，下次有機會，發篇css3漸變背景的詳細教程。

英文原文：

**打包**(請不要在ie下測試)

本文標題: 基於css3仿造window7的開始選單

本文位址:

使用css3仿造window7的開始選單

相當逼真，css3果然強悍。檢視例項 來看下原作者的設計草圖 簡明建立過程 第一步 建立如下選單結構 div id startmenu ul id programs li a href img src firefox 32.png alt mozilla firefox a li li a href...

基於CSS3的自適應布局技術

前端html 結構 css 表現 這部分，無非是兩大問題，裝飾與布局。裝飾某個widget就算再難，我們也可以用搞定。布局就不是這回事了，別的不說，display inline block有3px bug，定位布局與浮動布局相關的bug也不在10以下，關鍵是用起來非常麻煩，需要許多額外的元素 早些年...

基於原生js和css3實現barrage彈幕效果

執行圖 使用cancas畫板實現。迴圈重新整理和繪製畫板畫素，每一次迴圈更改繪製元素的x座標 核心函式 clearrect x,y,width,height 在給定的矩形內清除指定的畫素 filltext content,x,y 將content內容繪製到指定的 x,y 處 原始碼展示 var ca...