`

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

相关推荐

    ArcGIS Desktop轻松入门

    **ArcGIS Desktop 轻松入门...通过这个详细的中文教程,你将能够从零开始,逐步掌握ArcGIS Desktop的基本操作,实现地图的创建、数据的管理和分析,以及地理信息的可视化。不断实践和探索,你将在GIS的世界中游刃有余。

    java开源包11

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

    arcgis1:5万符号库.rar

    有了这个符号库,地图制图者可以极大地提高工作效率,无需从零开始设计每个符号,只需在预设的库中挑选即可。同时,由于这些符号遵循了地图制图的规范和标准,因此制出的地图具有高度的可读性和专业性。 在实际应用...

    tableau desktop 10.5 帮助(中文文档 用户指南 技术参考手册)

    这些内容旨在帮助用户从零开始学习Tableau,对于不熟悉Tableau的用户来说,这是最佳的学习起点。 接下来,文档提及了多个Tableau工作区的组成部分,比如连接、设置、管理、构建视图等。在连接部分,介绍了如何连接...

    Python库 | setux_desktop-0.21.20.3-py3-none-any.whl

    使用这样的库可以避免从零开始编写底层代码,而专注于应用的核心逻辑。 安装这个库非常简单,只需要拥有Python环境和pip(Python的包管理器)即可。在命令行中,用户可以使用 `pip install setux_desktop-0.21.20.3...

    java开源包1

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

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

    数字证书:从文件中读取数字证书,生成文件输入流,输入文件为c:/mycert.cer,获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...

    Another

    在编程中,类库是一组预先编写好的函数或类,程序员可以使用它们来构建应用程序,而不是从零开始编写所有代码。这里的"Another CLASS类库"很可能包含了一系列与文件操作相关的类,如打开、读取、写入和遍历目录等...

    从零学python系列之教你如何根据图片生成字符画.docx

    ### 从零学Python系列之教你如何根据图片生成字符画 #### 一、引言 在数字艺术领域,字符画是一种独特的艺术形式,它利用不同的字符来模拟图像的颜色和纹理,形成一种类似像素画的效果。Python作为一种强大的编程...

    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...

Global site tag (gtag.js) - Google Analytics