2、从零开始写一个webDesktop

最新推荐文章于 2024-07-23 23:46:22 发布

newzhq1984

最新推荐文章于 2024-07-23 23:46:22 发布

阅读量202

点赞数

分类专栏： webDesktop

本文链接：https://blog.csdn.net/newzhq1984/article/details/84693912

版权

webDesktop 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第二步：壁纸，任务栏增加开始按钮

第一步：设置壁纸，设置的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>

增加红色那块内容，效果如下：

第二步：增加开始菜单

随便找了一个开始菜单的图标，按钮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>

添加红色这段，显示效果如下：

，明天任务栏分块，左边开始菜单，中间各种任务，右边copyright吧。