2、从零开始写一个webDesktop

第二步:壁纸,任务栏增加开始按钮

第一步:设置壁纸,设置的CSS如下:

#wallpaper {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

 Html如下:

<body>
	<img id="wallpaper" src="images/wallpaper.jpg" />
	<div id="content">
		<div id="bottom">
  		</div>
	</div>
</body>

 增加红色那块内容,效果如下:


2、从零开始写一个webDesktop_第1张图片
 

第二步:增加开始菜单

随便找了一个开始菜单的图标,按钮CSS如下:

#start {
  position: absolute !important;
  color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  overflow: hidden;
  padding: 0 10px;
  height: 30px;
  margin: 0 0 10px 5px;
}

#start:hover{
  background: #fff;
}

#start:active {
  background: #555;
  border: 2px solid #fff;
  padding: 0 9px;
}

#start img {
  display: block;
  padding: 2px 0 0;
  width:26px;
  height:26px;
}

 添加Html代码

<body>
	<img id="wallpaper" src="images/wallpaper.jpg" />
	<div id="content">
		<div id="bottom">
			<a id="start" title="开始">
	      		<img src="images/start.png" />
			</a>
  		</div>
	</div>
</body>

 添加红色这段,显示效果如下:


2、从零开始写一个webDesktop_第2张图片
 ,明天任务栏分块,左边开始菜单,中间各种任务,右边copyright吧。

你可能感兴趣的:(Desktop)