HTML+CSS 模仿Windows 7 桌面效果桌面程式圖示工作列程式圖示開始菜單源代碼下載下傳

桌面程式滑鼠Hover 效果：

工作列程式滑鼠Hover 效果：

開始菜單效果：

桌面背景及程式圖示的結構如下：

<a href="http://11011.net/software/vspaste"></a>

在桌面&lt;div&gt;中加入背景圖檔：

     為桌面應用圖示添加滑鼠Hover 動态效果，text-shadow 用來設定應用程式文字陰影效果，-webkit-border-radius 可設定邊框圓角：

下面是工作列結構的HTML代碼：

     首先來看看開始菜單圖示如何設定，通過Hover 操作變換start.bmp 顯示位置，達到圖示發亮效果。

     工作列背景通過taskbarbg.png 實作，其他圖示Hover 效果通過改變taskbarhover.png 圖檔位置實作圖示下方高亮效果。

     對于開始菜單的設定可以參考之前提到的那篇文章，本篇在其基礎上添加了菜單分割線及透明效果。

開始菜單通過opacity 設定其透明度：

通過jQuery（common.js） 完成開始菜單打開/關閉效果

請使用Chrome 浏覽

本文轉自Gnie部落格園部落格，原文連結：http://www.cnblogs.com/gnielee/archive/2010/06/17/html-css-windows7-desktop.html，如需轉載請自行聯系原作者