<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { background:#3a6ea5; margin:0; padding:0; font-size:12px; font-family:宋体; } ul, li, dl, dt, dd { margin:0; padding:0; } ul { list-style:none; } #start { position:absolute; width:100%; height:30px; background:#d4d0c8; } #bar { margin-top:1px; border-top:1px solid #fff; padding:3px; } /*StartMenu*/ #bar #startMenu { position:absolute; display:none; width:200px; background:#d4d0c8; left:3px; bottom:25px; border-top:1px solid #404040; border-right:1px solid #404040; border-bottom:1px solid #808080; border-left:1px solid #808080; } #bar #startMenu ul { padding:5px; border-top:1px solid #fff; border-right:1px solid #fff; } #bar #startMenu ul li { padding:5px 0; line-height:28px; cursor:default; } #bar #startMenu ul li.active { background:#0a246a; color:#fff; } #bar #startMenu ul li dl { display:inline; } #bar #startMenu ul li dl dt { float:left; clear:left; width:28px; margin:0 5px; } #bar #startMenu ul li dl dd { margin-left:40px; } /*StartBtn*/ #bar .button { float:left; } #bar #startBtn { width:47px; height:22px; border:none; } #bar .startBtn { background:url(images/start.gif); } #bar .startBtnOver { background:url(images/start_hover.gif); } /*Time*/ #bar #timer { float:right; width:185px; border-top:1px solid #808080; border-left:1px solid #808080; border-right:1px solid #fff; border-bottom:1px solid #fff; line-height:22px; padding:0 6px; } </style> <script type="text/javascript"> function showStart() {  // 自动调整任务栏的位置  var start = document.getElementById("start");  var startHeight = 30;  var clientHeight = document.documentElement.clientHeight;  //可见部分高度  var scrollTop = document.documentElement.scrollTop;    //滚动条滚动高度  start.style.top = clientHeight + scrollTop - startHeight + "px"; } function toggleStart() {  // 改变开始按钮的状态：按下还是松开鼠标  var startBtn = document.getElementById("startBtn");  var currentClass = startBtn.className;  if(currentClass == "startBtn") {   ShowMenu();   startBtn.className = "startBtnOver";  } else {   HideMenu();   startBtn.className = "startBtn";  } } function SetActive(obj) {  // 设置菜单中当前项激活状态  obj.className = "active"; } function SetDeActive(obj) {  // 设置菜单中当前项非激活状态  obj.className = ""; } function ShowMenu() {  // 显示开始菜单  document.getElementById("startMenu").style.display = "block"; } function HideMenu() {  // 隐藏开始菜单  document.getElementById("startMenu").style.display = "none";  document.getElementById("startBtn").className = "startBtn"; } //当前时间 显示 function showTime() {  var now = new Date();  var year = now.getFullYear();  var month = now.getMonth() + 1;  var day = now.getDate();  var week = now.getDay();  var weekName = "星期";  switch(week) {   case 0:    weekName += "日";    break;   case 1:    weekName += "一";    break;   case 2:    weekName += "二";    break;   case 3:    weekName += "三";    break;   case 4:    weekName += "四";    break;   case 5:    weekName += "五";    break;   case 6:    weekName += "六";    break;  }  var hour = now.getHours();  var minute = now.getMinutes();  var second = now.getSeconds();  document.getElementById("timer").innerHTML = year +"年"+ month +"月"+ day +"日 " + weekName + " " + hour + ":" + minute +":"+ second; } window.onload = function() {  // 显示任务栏  showStart();  // 显示当前时间  var timer = window.setInterval("showTime()", 1000); }; // 窗口尺寸发生变化时，自动调整任务栏的位置，保持在最底端 window.onresize = showStart; </script> </head>

<body> <div id="start">  <div id="bar">   <div id="startMenu">    <ul>     <li onmouseover="SetActive(this)" onmouseout="SetDeActive(this)" onclick="HideMenu()">      <dl>       <dt><img src="data:images/icon_outlook.gif" /></dt>       <dd>Microsoft Office Outlook</dd>      </dl>     </li>     <li onmouseover="SetActive(this)" onmouseout="SetDeActive(this)" onclick="HideMenu()">      <dl>       <dt><img src="data:images/icon_excel.gif" /></dt>       <dd>Microsoft Office Excel</dd>      </dl>     </li>    </ul>   </div>   <div class="button">    <input id="startBtn" class="startBtn" type="button" name="start" onclick="toggleStart()" />   </div>   <div id="timer">    Windows Time Starting...   </div>  </div> </div> </body> </html>

HTML模仿桌面的更多相关文章

  1. Flex4 Alert PopupManager 演示样本

    Flex4中间PopupManager分类似模仿桌面用户界面弹出窗体,有些人还喜欢JS弹出屏幕操作,底层接口灰色禁用掉. 创建需要要喷射形式的文件,码如下面: <?xml version=&qu ...

  2. 三星 S10 运行 Ubuntu 系统

    导读 DeX 是一种模仿桌面操作系统的用户 UI 界面,把支持 DeX 的三星手机用数据线连上外置显示器,用户就可以获得一种类似桌面系统的使用体验. 三星 S8.Note 8.S9.Note 9.S1 ...

  3. Android简易实战教程--第十四话《模仿金山助手创建桌面Widget小部件》

    打开谷歌api,对widget小部件做如下说明: App Widgets are miniature application views that can be embedded in otherap ...

  4. devexpress实现模仿Win8桌面metro风格

    1.devexpress强大的控件库,可很容易的实现Win8桌面metro风格.使用的TileControl控件,拖动与Win效果相同.所有图片均来自网络资源.每个块也可实现如图所示的四种大小,如何实 ...

  5. 模仿添加QQ好友桌面快捷方式

    /** * * @param context * @param tname 桌面快捷方式的名字 * @param icon 好友头像 */ public static void addShortCut ...

  6. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  7. Linux 桌面美化那点事儿

    各个 Linux 桌面发行版刚拿到手的时候,或多或少都有点儿不满意,对它们进行一些改造是必须的.网上不乏各种 Linux 桌面美化的教程和经验贴,对我们这些 Linux 爱好者来说都是很好的参考资料. ...

  8. node-webkit：开发桌面+WEB混合型应用的神器

    顾名思义, node -webkit就是 node js+webkit. 这样做的好处显而易见,核心奥义在于,用 node js来进行本地化调用,用webkit来解析和执行HTML+JS. 快速上手 ...

  9. Android之场景桌面(一)

    声明:转载请务必注明出处,本文代码和主题仅供学习交流,请勿用于商业用途. 引言:最近Android场景桌面开始流行起来了,跟原始的Android桌面相比,场景桌面能逼真的模拟各种自然物体,并且通过点击 ...

随机推荐

  1. Maven 初学（一）基本概念

    Pom中有三个主要元素 Groupid,artifactid,version goupid 是一个组织唯一的标识  例如 com.ibm.www artifactid  是一个工程呢ID        ...

  2. 小菜鸟学 MQ（三）

    创建程序测试MQ 1,创建生产者 package com.robert; import java.util.Hashtable; import java.util.Map; import javax. ...

  3. codevs 1082 线段树练习3 模板题

    #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ],sum[ ...

  4. hdu3535 混合背包

    分三种情况. 至少取一种 那可以直接取 或者从上一种情况来取.dp[i][k]=max(dp[i][k],dp[i-1][k-a[j].c]+a[j].v,dp[i][k-a[j].c]+a[j].v ...

  5. Java基础-多线程

    介绍 操作系统能同时运行几个程序,每个独立运行的程序又称之为进程. 对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程.线程提供了多任务处理的能力 用进程和线程的观点来研究软件是当今普遍采 ...

  6. 40.Android之新手指引界面学习

    我们经常可以看到打开新App会有新手指引界面,类似蒙板效果今天来学习.原理其实很简单,设置一个透明Activity或者Dialog,然后修改其属性即可.由于实现比较简单,就贴一部分代码. 1.在And ...

  7. ZOJ 3430 Detect the Virus

    传送门: Detect the Virus                                                                                ...

  8. 哈希加密算法 MD5,SHA-1,SHA-2,SHA-256,SHA-512,SHA-3,RIPEMD-160 - aTool

    一.MD5哈希加密算法 atool.org MD5即Message-Digest Algorithm 5(信息-摘要算法 5),用于确保信息传输完整一致.是计算机广泛使用的散列算法之一(又译摘要算法. ...

  9. hdu 1201 18岁生日

    #include <stdio.h> int r(int y) { return (y%4==0&&y%100!=0)||(y%400==0); } int f(int y ...

  10. ajax 如何做到 SEO 友好

    我猜你是在网络上搜索“ajax如何被搜索引擎收录”.“ajax SEO”.“ajax SEO友好”等关键词来到这里的.你可能已经很疲惫了,因为前段时间我也这样搜索,但是我发现搜索到的内容质量不高,有的 ...