html怎么加入桌面图片,HTML+CSS3 模仿Windows7 桌面效果

• 

  Computer

• 

  Recycle Bin

• 

  Network

中加入背景图片：

复制代码代码如下:

#win

{

background-image: url(images/win7bg.jpg);

background-position: center;

width: 880px;

height: 550px;

border: #ffffff 1px solid;

} 为桌面应用图标添加鼠标Hover 动态效果，text-shadow 用来设置应用程序文字阴影效果，-webkit-border-radius 可设置边框圆角：

#app

{

float: left;

text-align: center;

margin: -15px 0 0 -30px;

list-style: none;

}

#app a

{

text-decoration: none;

border: solid 1px transparent;

display: block;

padding: 3px;

margin: 20px 0 0 0;

color: #ffffff;

text-shadow: 0.2em 0.1em 0.3em #000000;

}

#app a:hover

{

border: solid 1px #bbd6ec;

-webkit-border-radius: 3px;

box-shadow: inset 0 0 1px #fff;

-webkit-box-shadow: inset 0 0 1px #fff;

background-color: #5caae8;

}

任务栏程序图标

   

下面是任务栏结构的HTML代码：

复制代码代码如下:

首先来看看开始菜单图标如何设置，通过Hover 操作变换start.bmp 显示位置，达到图标发亮效果。

复制代码代码如下:

#taskbar #start

{

position: absolute;

text-align: center;

width: 57px;

height: 46px;

background: url(images/start.bmp) 0 -6px no-repeat;

}

#taskbar #start:hover

{

text-decoration: none;

background-position: 0 -114px;

}

     

     

任务栏背景通过taskbarbg.png 实现，其他图标Hover 效果通过改变taskbarhover.png 图片位置实现图标下方高亮效果。

复制代码代码如下:

#taskbar

{

height: 42px;

width: 880px;

margin: -42px 0 0 1px;

background: url(images/taskbarbg.png) no-repeat;

}

#taskbar img

{

margin: 5px 0 0 0;

width: 30px;

height: 29px;

}

#taskbar a

{

position: absolute;

text-align: center;

width: 57px;

height: 46px;

background: url(images/taskbarhover.png) 0 -46px no-repeat;

}

#taskbar a:hover

{

background-position: 0 -3px;

}

开始菜单

对于开始菜单的设置可以参考之前提到的那篇文章，本篇在其基础上添加了菜单分割线及透明效果。

复制代码代码如下:

 

开始菜单通过opacity 设置其透明度：

复制代码代码如下:

#startmenu

{

border: solid 1px #102a3e;

overflow: visible;

display: block;

float: left;

height: 404px;

width: 400px;

opacity: 0.9;

-webkit-border-radius: 5px;

position: absolute;

box-shadow: inset 0 0 1px #ffffff;

-webkit-box-shadow: inset 0 0 1px #ffffff;

background-color: #619bb9;

background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));

}

通过jQuery(common.js) 完成开始菜单打开/关闭效果

复制代码代码如下:

$(document).ready(function () {

$("#start").click(function () {

$("#menuwin").css("display", "block");

});

$("#win").click(function () {

$("#menuwin").css("display", "none");

});

$("#desktop").click(function () {

$("#menuwin").css("display", "none");

});

});

源代码下载

请使用Chrome 浏览