<!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. 以一个权限系统来告别WebForm —（一）项目整休架构设计与数据库设计

    在本节我想与大家与分享一下,我所将要做的权限系统的架构和数据库的表的设计.请各位大神们对我项目中设计的不足之处进行指导,让我得以更好的写完它,留给需要它的人. 我的项目架构如下图所示: 如上图所示,在 ...

  2. Code Review Engine Learning

    相关学习资料 https://www.owasp.org/index.php/Code_review https://www.owasp.org/images/8/8e/OWASP_Code_Revi ...

  3. groovy-运算符

    算术和条件运算符 Groovy支”!”操作符,例如: 1 def expression = false 2 assert !expression 基于集合的运算符: Spread Operator ( ...

  4. 连通性2 无向图的割边 (cut edge)

    这是DFS系列的第二篇 割边的概念 In graph theory, a bridge, isthmus, cut-edge, or cut arc is an edge of a graph who ...

  5. Why Deep Learning Works – Key Insights and Saddle Points

    Why Deep Learning Works – Key Insights and Saddle Points A quality discussion on the theoretical mot ...

  6. [LeetCode] next_permutation

    概念 全排列的生成算法有很多种,有递归遍例,也有循环移位法等等.C++/STL中定义的next_permutation和prev_permutation函数则是非常灵活且高效的一种方法,它被广泛的应用 ...

  7. tuning-primer.sh mysql 报表

    [root@server-mysql mytop-1.6]# wget http://www.day32.com/MySQL/tuning-primer.sh --2016-07-03 19:42:3 ...

  8. C语言or和and运算

    #include <stdio.h> void main () { printf( | ); printf( | ); printf( | ); printf( | ); printf( ...

  9. linux 的终端字体色和背景色的修改方法（二）

     Linux终端下的颜色设置 2013-08-31 22:57:15 分类: LINUX   在 ANSI 兼容终端(例如 xterm.rxvt.konsole 等)里, 可以用彩色显示文本而不仅仅是 ...

  10. 一种 Visual Studio 不能单步调试（函数调用）问题

    Visual Studio每次出"莫名其妙的问题"的时候都非常棘手.这次遇到这么一个问题: 新建的Windows的控制台窗口程序(C++),编译链接运行没有问题.但是想单步调试一下 ...