【图】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> <b>U</b> 　 <p>工作之余做了这个小东西仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和java-script做的菜单就不做了，偷懒中感兴趣的朋友可以和我联系，大家交流交流．</p><a href="https://m.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）</a> <p><b> [email]PuterJam@etang.com[/email]</b> </p><a href="https://m.tulaoshi.com/webkaifa/" style="position:absolute;left:-10000px;">（本文来源于图老师网站，更多请访问https://m.tulaoshi.com/webkaifa/）</a> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

热门搜索

js+css实现的仿office2003界面

猜你喜欢

js+css实现的仿office2003界面

Office2003实现PDF文件转Word文档

s8lol主宰符文怎么配

excel 2003界面介绍

office2003和office2019共存的方法

lol偷钱流符文搭配推荐

用好Office2003中的翻译服务

与Office2003共舞:Outlook新功能

lolAD刺客新符文搭配推荐

msiexec.exe进程是什么

Java批量修改文件名的实例代码