<!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. iOS开发小技巧--利用运行时得到隐藏的成员变量

    一.关于运行时,已经从网络上摘抄了一片文章,这里只有项目中自己的简单使用 -- 查找隐藏的成员变量 导入头文件 可以获得隐藏的成员变量,方法,属性等 代码: 打印效果图:

  2. OC基础--description方法

    PS:经过之类重写description方法后,个人感觉有点像C#中的ToString();方法 一.description方法的作用:(输出所有的OC对象都用%@) 1.默认情况下(不重写descr ...

  3. IntelliJ13+tomcat+jrebel实现热部署(亲测可用)

       网上有很多介绍intellij idea整合jrebel插件实现热部署的文章,但是有的比较复杂,有的不能成功,最后经过各种尝试,实现了整合,亲测可用!步骤说明如下:   一.先下载jrebel安 ...

  4. Java Web-session介绍

    使用情况 Session对象记载某一特定的客户信息,不同的客户用不同的Session对象来记载 Session对象有效期:默认为20分钟,可设定 Session工作原理:在应用程序中,当客户端启动一个 ...

  5. Java基础-JVM内存回收

    Sun的JVMGenerationalCollecting(垃圾回收)原理是这样的:把对象分为年青代(Young).年老代(Tenured).持久代(Perm),对不同生命周期的对象使用不同的算法.( ...

  6. C语言中常用的string.h的字符函数

    strcmp 字符串比较函数 原型: int strcmp(char *str1, char *str2); 例子: ) printf("buffer 1 is greater than b ...

  7. DLX模型问题

    问题:sevenzero liked Warcraft very much, but he haven't practiced it for several years after being add ...

  8. TCP/IP详解 笔记一

    概述: Tcp-ip让网络上的计算机进行通信,而不管计算机和操作系统是否一样. 分层结构: Tcp/ip协议族是多层协议的组合,而tcp和ip只是其中的两个协议而已. 一个通信举例: 注意图的右上方: ...

  9. JS 在线网站

    JS 在线压缩网站 国内压缩js网站http://tool.css-js.com/ uglifyjs 压缩js网站http://lisperator.net/uglifyjs JS在线格式化网站 ht ...

  10. IIS负载均衡-Application Request Route详解第一篇： ARR介绍（转载）

    IIS负载均衡-Application Request Route详解第一篇: ARR介绍 说到负载均衡,相信大家已经不再陌生了,本系列主要介绍在IIS中可以采用的负载均衡的软件:微软的Applica ...