<!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. Struts2 标签分类

  2. Html-Css-iframe的使用

    iframe是作为在网页中嵌套网页的标签 <iframe src="homeIndex_init.html" width="100%" height=&q ...

  3. 『jQuery』.html(),.text()和.val()的概述及使用

    转自http://www.jb51.net/article/35867.htm 如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文 ...

  4. Java的多线程机制系列：(三）synchronized的同步原理

    synchronized关键字是JDK5之实现锁(包括互斥性和可见性)的唯一途径(volatile关键字能保证可见性,但不能保证互斥性,详细参见后文关于vloatile的详述章节),其在字节码上编译为 ...

  5. Ext comboBox的remote和local的区别

    remote模式下不能使用模糊查询的功能 而local模式下可以实现模糊查询的功能 如果非要实现模糊查询的功能,最好就是提前把数据查询出来,缓存到本地,然后再用local模式 且,改个属性,改成可编辑 ...

  6. android.net.wifi的简单使用方法

    获取Wifi的控制类WifiManager.  WifiManager  wm=(WifiManager)getSystemService(Context.WIFI_SERVICE); 接下来可以对w ...

  7. 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

  8. 用java做的免费投票器/软件/工具 可定制

    免费投票器/软件/工具 可定制 下载地址: http://pan.baidu.com/s/1c0je5HY 界面预览:

  9. 5 Tips for creating good code every day; or how to become a good software developer

    Being a good developer is like being any other good professional, it’s all it’s about doing as much ...

  10. Hibernate4 执行存储过程

    Hibernate3.3.2版本中getSession().connection()已被弃用,hibernate4中官方推荐使用Session doWork()方法进行jdbc操作 当Hibernat ...