`

1、从零开始写一个webDesktop

 
阅读更多

第一步：主界面和任务栏

首先实现主界面的简单的界面内容，1、指针，2、滚动条隐藏，背景设置

第一步：鼠标到哪都应该是指针。CSS代码如下：

* {
  cursor: default;
}

 第二步：操作界面应该没有滚动条，并且背景为偏黑色（不使用背景图片）。CSS代码如下：

html,
body {
  overflow: hidden;
}

body {
  background: #333;
  font: 12px/1 'Microsoft YaHei';
}

 这样就生成了一个浏览器区域，相当于windows操作系统的鼠标可到范围吧。

现在我们在这里面做文章吧，先像windows操作系统一样增加一个状态栏。

第一步：设置一个内容区域，CSS如下

#content {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 700px;
  min-height: 500px;
}

 第二步设置一块任务栏区域：

#bottom {
  position: absolute !important;
  left: 0;
  right: 0;
  background: #555;
  border-top: 1px solid #fff;
  opacity: 0.8;
  overflow: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 30px;
  bottom: 0;
}

 html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webDesktop</title>
<link rel="stylesheet" href="desktop.css" />
</head>
<body>
	<div id="content">
		<div id="bottom">
  		</div>
	</div>
</body>
</html>

 

这样界面和任务栏就搭载好了。效果如下：



 

明天准备，添加开始菜单和时间区域，其实时间区域没有多大必要，操作系统是有时间的。

 

  • 大小: 4.8 KB
分享到：
| SSH中的重构 cookies的管理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics