js+css实现的仿office2003界面

网络编程发布日期：2026/1/19 浏览次数：1

正在浏览：js+css实现的仿office2003界面

效果图

<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> <u> <b>U</b></u> 　 <p>工作之余做了这个小东西仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和java-script做的菜单就不做了，偷懒中感兴趣的朋友可以和我联系，大家交流交流．</p> <p><b> [email]PuterJam@etang.com[/email]</b> </p> </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：用javascript实现记录来宾姓名的代码

下一篇：用javascript实现“闪动”标题栏