html+css实现windows桌面

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<style type="text/css">
  	*{margin:0px;padding:0px;}
  		a{width:64px;height:64px;background:url("images/1.png");
  			display:block;margin:120px auto;}
  		a:hover{background:url("images/2.png");}
  		a:active{background:url("images/3.png");position:relative;top:6px;}
  	</style>
  </head>

  <body>
  <a class="A"></a>
  <script type = "text/javascript" src="js/jquery.js"></script>
  <script type = "text/javascript">
  	var winWidth=window.innerWidth;//获取宽度
  	var winHeight=window.innerHeight;//获取高度
  	$(".A").click(function (){
  		window.open("MyHtml2.html","newwindow",
  			"width-winWidth" , "height-winHeight")
  	});
  </script>
  </body>
</strong>

<strong><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
	*{margin:0px ; padding:0px;}
		body{background:url("images/10o.jpg")no-repeat;
			background-size:100% 100%;height:770px;}/*建立背景*/
		#begin{height:50px;width:100%;background:rgba(183,186,251,0.5 );
		position:fixed;bottom:0px;left:0px;box-shadow:3px 2px 15px #000000;
		border-radius:10px;}/*小羽片*/
		#meta{position:absolute;bottom:75px;left:0px;width:400px;
		height:400px;display:none;}
		#stattmenu{border:1px solid #102a3e;height:400px;background:#619bb9;
		/*!--渐变--*/background:-moz-linear-gradient(top,rgba(130,148,247,0.6),
		rgba(218,223,252,0.4)50%,rgba(206,27,216,0.5));padding:10px;
		box-shadow:2px 2px 15px #000000;border-radius:7px;}
		#programs{background:#FFFFFF;border:1px solid #9900ff;
			width:235px;height:376px;overflow:auto;border-radius:10px;
			box-shadow:3px 2px 15px #000000;float:left;}
		#programs li{list-style:none}
		#programs a{display:block;border:1px solid #ffff;
			color:#4b4b4b;text-decoration:none;width:230px;margin:3px;
			padding:4px;}
		#programs a img{border:0px;vertical-align:middle;
			margin-right:5px;}
		#programs a:hover{border:1px solid #9933ff;box-shadow:1px 1px 10px #cc00cc;
		background:-moz-linear-gradient(top,#EECC44,#FBF2A8);}
		#links{float:left;margin-left:30px;position:relative;padding-top:30px}
		#links li{list-style:none;}
		#links li a{text-decoration:none;/*取出下划线*/color:#FFFFFF;font-size:14px;
		line-height:30px;}
		#links .icon{position:absolute;right:10px ;top:-30px;}
	</style>
  <script language="javascript" src="js/jquery.js"></script>
  </head>
  <body>
  	<div id="begin">
  		<img src="images/4.png"width="60px" onmouseover="$('#meta').show();"
  		onclick="$('#meta').hide();"/>
  		<div id="meta">
  			<div id="stattmenu">
  				<ul id="programs">
  					<li><a href="#"><img src="images/firefox-32.png" alt=""/>Mozilla firefox</a></li>
  					<li><a href="#"><img src="images/Chrome.png" alt="">Goole Chrome</a></li>
  					<li><a href="#"><img src="images/safari.png" alt="">Safari</a></li>
  					<li><a href="#"><img src="images/opera.png" alt="">opera</a></li>
  					<li><a href="#"><img src="images/ie.png" alt="">Internet Explorer</a></li>
  					<li><a href="#"><img src="images/rss_32.png" alt="">RSS Feeds</a></li>
  					<li><a href="#"><img src="images/twitter_32.png" alt="">Twitter</a></li>
  					<li><a href="#"><img src="images/delicious_32.png" alt="">Delicious</a></li>
  				</ul>

  				<ul id="links">
  					<li class="icon"><img src="images/folder.png"></li>
  					<li><a href="#">王琪</a></li>
  					<li><a href="#">我的控制面板</a></li>
  					<li><a href="#">我的电脑</a></li>
  					<li><a href="#">图片</a></li>
  					<li><a href="#">音乐</a></li>
  					<li><a href="#">计算器</a></li>
  					<li><a href="#">游戏</a></li>
  					<li><a href="#">打印机</a></li>
  					<li><a href="#">默认</a></li>
  				</ul>
  			</div>
  		<div>
  	</div>
  </body>
</html>
</strong>

时间: 2024-10-21 13:09:57

html+css实现windows桌面的相关文章

【转载】HTML+CSS 模仿Windows 7 桌面效果

前一阵在园子里看到一篇文章<使用css3仿造window7的开始菜单>,文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果,很久以来一直被WPF/Silverlight 山上的风景所吸引,未成想其他的山也同样引人入胜.于是心血来潮也尝试着做了一个Windows 7 桌面效果,先来看几张截图吧. 桌面程序鼠标Hover 效果: 任务栏程序鼠标Hover 效果: 开始菜单效果: 桌面程序图标 桌面背景及程序图标的结构如下: <div id="win">

Ext js框架模拟Windows桌面菜单管理模板

一款超炫的后台,Ext模拟Windows桌面,Ext经典浅蓝风格,功能非常强大,包括最大化.最小化.状态栏.桌面图标等,不过需要非常懂Ext脚本的才可驾驭它.? 1.图片 ?2. [代码][HTML]代码  <html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Ext 2.0 Desktop

.Net Core 3 骚操作 之 用 Windows 桌面应用开发 Asp.Net Core 网站

前言 曾经在开发 Asp.Net 网站时就在想,为什么一定要把网站挂到 IIS 上?网站项目的 Main 函数哪儿去了?后来才知道这个 Main 函数在 w3wp.exe 里,这也是 IIS 的主进程.Asp.Net 网站的命门被 IIS 捏着,我无力改变.有时需要临时搭建一个简单的 Web 服务器,去网上一通度娘,发现了 MyWebServer.HFS (HTTP File Server) 等简单实用的 Web 服务器,而且它们还是桌面应用.我就在想,什么时候能用 .Net 来开发一个桌面 W

Cocos2dx集成于windows桌面窗口程序的步骤

2D游戏需要做编辑器,而编辑器总是希望可以复用游戏中的逻辑来运行场景试看效果. 对于cocos2dx开发的程序,这个需求可以描述为: 实现一种方法,在桌面窗口程序中的某个控件上显示cocos2dx的场景,而其他部分保持该操作系统原生ui的功能. 这里以windows桌面程序为例,描述如何实现这一点,cocos2dx版本为2.2.5 代码用qt实现,但是没有用到太多qt的东西,windows api通用. 1 创建工程.这里我们依然使用cocos2dx提供的工程生成器创建工程,以得到完美的coco

Windows桌面开发者的必备软件

如果你新安装好了一台WindowsXP或者Windows7的机器,作为一个开发人员,我建议安装下面这些软件: 1,WinMerge. http://winmerge.org/ 2, Lua for windows,或者Python或者Ruby,选择一个你喜欢的脚本语言.LuaForWindows还自带了一个Scite编辑器,节省了找一个程序员相关编辑器的步骤. http://luaforwindows.luaforge.net/ 3,7-zip,不需要安装winzip或者winrar了 http

基于EasyUI实现windows桌面

之前为大家介绍了 基于jquery tool实现的windows桌面效果,今天给大家带来一款基于EasyUI实现windows桌面.这款桌面适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下: 在线预览   源码下载 实现的代码. js代码: $(function () { $.messager.alert("站长素材", "欢迎访问站长素材,您现在可以体验改应用了,更多JS代码请继续关注&

Windows桌面应用开发入门选择

当你想要创建一个新的桌面应用的时候,第一个你需要做的决定是使用Win32 和COM 还是使用.NET两个选项. C++ 和 Win32 使你"离奖牌更近",并使你可以获得最佳的应用性能..NET 使你使用较低语言达到较高的编码水平并实现更高的效率. 下面是两者的区别: 补充: .NET 开发语言:C#,C++,F#,VB .NET为桌面.Windows Phone和Windows存储提供了一致的.一流的开发经验. 它提供了更高水平的编码和生产率,封装了很多公用可重复使用高效的代码,比如

使用VNC访问Windows桌面

1. 背景介绍 两台电脑,一个笔记本,一个台式机 笔记本上装的是Windows 10, 通过上网小助手上网 (P.S.  上网小助手...Stupid Policy...) 台式机上装的是Ubuntu 14.04LTS, 不需要上网小助手就能自由地上网 101 - 为什么需要使用VNC访问Windows桌面? A: 因为Windows 10桌面加了域,而域安全策略禁止了远程桌面访问.原来在Linux桌面上使用Remmina Remote Desktop Client远程连接Windows 10桌

Windows桌面小程序+谷歌浏览器+人工智能算法 = 100+职位一键投递

详细视频演示github开源代码网上投过简历的各位观众都知道,海投简历需要在多个招聘网站查找职位.找到合适的职位后呢,还要一个一个点击投递.对于需要大量投递简历的求职者,这一系列操作真的是非常的麻烦. 有没有什么方法可以让海投简历轻松一点呢?今天这期视频就是介绍一款我自己开发的一个windows桌面程序,专门解决海投简历操作麻烦的问题,希望它能够帮助到各位.在之后的讲解中,简称这款APP为小助手. 小助手能够解决两个问题:1.将各个网站的职位下载到本地统一管理,方便用户查询.2.可以将用户批量勾