`

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
分享到:
评论

相关推荐

    java开源包1

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    JAVA上百实例源码以及开源项目

     一个Java+ajax写的登录实例,附有JAVA源文件,JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...

    JAVA上百实例源码以及开源项目源代码

     一个Java+ajax写的登录实例,附有JAVA源文件,JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...

    java开源包11

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包2

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包3

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包6

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包5

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包10

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包4

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包8

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包7

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包9

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    java开源包101

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    Java资源包01

    BlueLeech是一个开源程序,它从指定的URL开始,搜索所有可用的链接,以及链接之上的链接。它在搜索的同时可以下载遇到的链接所指向的所有的或预定义的范围的内容。 WebSocket协议的Java实现 WebSocket4J WebSocket4...

    测试培训教材

    一个好的测试管理工具应该能把以上几个阶段都管理起来。 测试人员每时每刻都在度量别人的工作成果,而测试人员的工作成果又由谁来度量呢?度量的标准和依据是什么呢?软件测试的度量是测试管理必须仔细思考的问题。...

    Linux简明教程.rar

    目的:让更多的人从零开始学会使用linux,少走弯路 演示系统:Ubuntu 10.04 desktop 适用人群:未接触或刚刚接触linux的同志们 本教程使用Ubuntu 10.04 LTS - Lucid Lynx做演示,其他版本皆大同小异,有特殊的相...

Global site tag (gtag.js) - Google Analytics