js+css实现的仿office2003界面

2016-02-19 10:34 6 1 收藏

下面图老师小编跟大家分享js+css实现的仿office2003界面，一起来学习下过程究竟如何进行吧！喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发】

效果图

<html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>仿Office2003的工具条</title> <style> .lostfocus { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; } .getfocus { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; } .menubar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6)} .bodybar {filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, endcolorstr=#F7F7F7, startcolorstr=#DEDBD6)} .leftitem { font-family: Arial; font-size: 12px; color: #000000; cursor: hand } .getitem { font-family: Arial; font-size: 12px; color: #000000; cursor: default } .lostitem { cursor: default; color: #808080; font-size: 12px; font-family: Arial; } .menuup { PADDING-LEFT: 4px; PADDING-RIGHT: 4px; CURSOR: hand;} .menuover { PADDING-LEFT: 3px; PADDING-RIGHT: 3px; BACKGROUND-COLOR: #B5BED6; BORDER: 1px solid #08246B; CURSOR: hand; } .lostlist { border: 1px #ffffff solid; background-color: #ffffff; font-size: 12px; font-family: Arial; } .getlist { border: 1px #08246B solid;background-color: #ffffff; font-family: Arial; font-size: 12px; } .listover {BACKGROUND-COLOR: #B5BED6; BORDER-left:1px solid #08246B} .listDiv { filter: alpha(opacity=90,finishopacity=0,style=0) blendtrans(duration=.3); } </style> </head> <body onclick="HideMenu()" style="margin:0px" bgcolor="999999"> 文件(F)编辑(E)<img style="border:1px inset" height=1 width=1> <img style="border:1px inset" height=1 width=1> <img style="border:1px inset" height=1 width=1> <img style="border:1px inset" height=1 width=1> 姓名 <input type="text" name="T5" size="18" class="lostfocus" gf="0" onmouseover='this.className="getfocus"' onmouseout='if (this.gf=="0") this.className="lostfocus"' onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'> 密码 <input type="password" name="T6" size="18" class="lostfocus" gf="0" onmouseover='this.className="getfocus"' onmouseout='if (this.gf=="0") this.className="lostfocus"' onblur='this.className="lostfocus";this.gf="0"' onfocus='this.className="getfocus";this.gf="1"'> <img style="border:1px inset" height=14 width=0> 登陆　<img style="border:1px inset" height=1 width=1> <img style="border:1px inset" height=1 width=1> <img style="border:1px inset" height=1 width=1> <img style="border:1px inset" height=1 width=1> 　 <img style="border:1px inset" height=14 width=0> <b>B</b><i> <b>I</b></i> <b>U</b> 　 <p>工作之余做了这个小东西仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和java-script做的菜单就不做了，偷懒中感兴趣的朋友可以和我联系，大家交流交流．</p><a href="http://www.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）</a> <p><b> [email]PuterJam@etang.com[/email]</b> </p><a href="http://www.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）</a> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1595095.html

上一篇： msiexec.exe进程是什么
下一篇： Java批量修改文件名的实例代码

看过《js+css实现的仿office2003界面》的人还看了以下文章更多>>

Windows 8界面细述

标签：电脑入门

从桌面到 Metro/Modern，从 Aero UI 到 Metro UI，你知道 Windows 8 的详细界面相比 Windows 7 都有哪些改进与精简吗? 我们从 Windows 8 四个开发预览版本的对比图中可以看到 Windows 8 的基本界面分两大部分，继承自 Windows 7 的传统桌面和适用于平板电脑的 Metro/Modern 界面。这两部分界面主要由Charm 菜单/超级按钮连接。下面我们来看...

MSN Explorer 9.5界面

标签：平面设计标志设计 UI设计 VI设计

MSN Explorer 9.5包含多项新技术,例如反钓鱼技术,MSN病毒防护,间谍清理等等，下载地址：http://membercenter.msn.com/download.aspx?lm=en-us（这软件是收费软件）以下看看它的界面： MSN连接控制面板：如果在这一步输入错误，那样按next后，鼠标会自动回到填错的填空里.(人性化的体现) 主界面的图标依旧.

JS+CSS打造可拖动的聊天窗口层

标签： Web开发

一个可以拖动的聊天窗口层，兼容IE和FF： !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=gb2312" meta http-equiv="content-script-type" content...

AS 3.0界面UI设计欣赏

标签：平面设计标志设计 UI设计 VI设计

设计师关于公司开发部的界面，以导航为主和一些次要的功能，主要是对一些AS 3.0的尝试。

Real Player 11界面评测

标签：平面设计标志设计 UI设计 VI设计

REALPALYER11 界面评测 REALPLAYER11的出现,迫不及待的找来,已经发现网络上很多朋友都已经在用,安装和早期版本一样.界面风格却完全不同标题栏已经改成最近比较流行的VISTA风格,按纽部分和以往一样使用渐变,安装界面使用同一风格,鉴于REALPLAYER的用户,在延续版本上非常容易上手,REALPLAYER11将常用的栏目放在了标题栏的下面.做成了类似网页的...

查看更多精彩>>