<img src=”images/library.png” />
</a> <a href=”#” style=”left: 180px”>
<img src=”images/mp.png” />
</a> <a href=”#” style=”left: 240px”>
<img src=”images/live.png” />
</a> <a href=”#” style=”left: 300px”>
<img src=”images/outlook.png” />
</a>
<div id=”desktop”></div>
</div>
首先来看看开始菜单图标如何设置，通过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;
}
开始菜单
对于开始菜单的设置可以参考之前提到的那篇文章，本篇在其基础上添加了菜单分割线及透明效果。
<div id=”menuwin”>
<div id=”startmenu”></div>
<ul id=”programs”>
<li><a href=”#”>
<img src=”images/ie.png” />Internet Explorer</a></li>
<li><a href=”#”>
<img src=”images/mc.png” />Microsoft Media Center</a></li>
<li> <div id=”leftspliter”></div></li>
<li><a href=”#”>
<img src=”images/word.png” />Microsoft Word 2010</a></li>
<li><a href=”#”>
<img src=”images/excel.png” />Microsoft Excel 2010</a></li>
<li><a href=”#”>
<img src=”images/powerpoint.png” />Microsoft PowerPoint 2010</a></li>
