<!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. Java中唯一数的生成

    唯一数的生成很简单,基本上以时间为基础进行生成.在JDK里面已经有java.util.UUID类可以生成唯一的随机数.如果希望生成的唯一数为特定的格式,那么就需要自己来生成唯一数了.生成唯一数时有两个 ...

  2. Http状态码集合

    忘了之前在哪里收集的了,先表示感谢. 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请 ...

  3. Oracle 11g 默认用户名和密码

    安装ORACLE时,若没有为下列用户重设密码,则其默认密码如下: 用户名 / 密码                      登录身份                              说明 ...

  4. BZOJ-1875 HH去散步 DP+矩阵乘法快速幂

    1875: [SDOI2009]HH去散步 Time Limit: 20 Sec Memory Limit: 64 MB Submit: 1196 Solved: 553 [Submit][Statu ...

  5. win10 1607 安装密钥 GVLK

    Core=YTMG3-N6DKC-DKB77-7M9GH-8HVX7 Professional=VK7JG-NPHTM-C97JM-9MPGT-3V66T Enterprise=XGVPP-NMH47 ...

  6. TYVJ1305 最大子序和

    描述 输入一个长度为n的整数序列,从中找出一段不超过M的连续子序列,使得整个序列的和最大. 例如 1,-3,5,1,-2,3 当m=4时,S=5+1-2+3=7当m=2或m=3时,S=5+1=6 输入 ...

  7. 活用scanf

    scanf()是C语言中用于读入格式化数据(formatted data)的函数. 我们可能对scanf()的一般用法已经了然,而至于scanf()读入数据的机制恐怕并不十分清楚. 下面我将比较详细地 ...

  8. [Angularjs]ng-class,ng-class-even,ng-class-odd

    写在前面 最近在通过angularjs将数据绑定到前端,其中也涉及到很多新的东西,一些效果还是很有必要实现的.在使用中发现ng-class,ng-class-even.ng-class-odd的使用, ...

  9. 批处理中的echo命令图文详解

    批处理中的echo命令图文详解 1. Echo 显示当前ECHO的状态:ECHO ON 或者ECHO OFF 2. ECHO ON 将ECHO状态设置为ON,将显示命令行,也就是前面的C:\>类 ...

  10. Protocol Buffers(Protobuf) 官方文档--Protobuf语言指南

    Protocol Buffers(Protobuf) 官方文档--Protobuf语言指南 约定:为方便书写,ProtocolBuffers在下文中将已Protobuf代替. 本指南将向您描述如何使用 ...