js+css实现的仿office2003界面

效果图

screen.width-461) window.open('http://bbs.javascript.com.cn/attachment/Mon_0608/10_9458_40785726bd46566.jpg');" border=0 align=center src="http://bbs.javascript.com.cn/attachment/Mon_0608/10_9458_40785726bd46566.jpg">

<html> 
<head> 
<meta http-equiv="Content-Language" content="zh-cn"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>仿Office2003的工具条</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F*----------%20%0D%0A%E8%88%9C%E5%AD%90%E5%88%B6%E4%BD%9C%20%0D%0AMenu%20java-script%20Made%20by%20PuterJam%20%0D%0AE-mail%3Aputerjam%40etang.com%20%0D%0A-------------*%2F%20%0D%0Avar%20listnum%3D0%3B%20%0D%0Avar%20menu_height%3B%20%0D%0Avar%20menu_width%3B%20%0D%0Avar%20menu_left%3B%20%0D%0Avar%20menu_top%3B%20%0D%0Avar%20topMar%20%3D%201%3B%20%0D%0Avar%20leftMar%20%3D%20-2%3B%20%0D%0Avar%20space%20%3D%201%3B%20%0D%0Avar%20isvisible%3B%20%0D%0Afunction%20listbox(listname%2Cbuttonname%2Cvaluename)%20%0D%0A%7B%20%0D%0Athis.listname%3Dlistname%20%0D%0Athis.buttonname%3Dbuttonname%20%0D%0Athis.valuename%3Dvaluename%20%0D%0A%7D%20%0D%0Afunction%20listaction(obj%2Caction%2Cshowlist%2Cscroll%2Ctw)%20%0D%0A%7B%20%0D%0Anum%3Dobj.id.charAt(obj.id.length-1)%20%0D%0Aif%20(!scroll)%20%7Bscroll%3D0%7D%20%0D%0Aif%20(!tw)%20%7Btw%3D105%7D%20%0D%0Alistbox%3Deval(lb%5Bnum%5D.listname)%20%0D%0Alistbutton%3Deval(lb%5Bnum%5D.buttonname)%20%0D%0Alistvalue%3Deval(lb%5Bnum%5D.valuename)%20%0D%0Aswitch%20(action)%20%0D%0A%7B%20%20%0D%0Acase%200%3A%20%0D%0Alistbox.className%3D%22getlist%22%3Blistbutton.className%3D%22listover%22%20%0D%0Abreak%3B%20%0D%0Acase%201%3A%20%0D%0Aif%20(listbox.gf%3D%3D%220%22)%20%20%0D%0A%7Blistbox.className%3D%22lostlist%22%3Blistbutton.className%3D%22menubar%22%7D%20%0D%0Abreak%3B%20%0D%0Acase%202%3A%20%0D%0Afor%20(i%3D0%3Bi%3Clb.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aif%20(num!%3Di.toString())%7B%20%0D%0Anlistbox%3Deval(lb%5Bi%5D.listname)%20%0D%0Anlistbutton%3Deval(lb%5Bi%5D.buttonname)%20%0D%0Anlistvalue%3Deval(lb%5Bi%5D.valuename)%20%0D%0Anlistbox.className%3D%22lostlist%22%3Bnlistbutton.className%3D%22menubar%22%20%0D%0Anlistbox.gf%3D%220%22%20%0D%0A%7D%20%0D%0A%7D%20%0D%0AShowMenu(listbox%2Cshowlist%2Ctw%2Cscroll)%3Blistbox.className%3D%22getlist%22%3Blistbox.gf%3D%221%22%20%0D%0Alistnum%3Dnum%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20HideMenu()%20%20%0D%0A%7B%20%0D%0Avar%20mX%3B%20%0D%0Avar%20mY%3B%20%0D%0Avar%20vDiv%3B%20%0D%0Avar%20mDiv%3B%20%0D%0Aif%20(isvisible%20%3D%3D%20true)%20%0D%0A%7B%20%0D%0AvDiv%20%3D%20document.all(%22listDiv%22)%3B%20%0D%0AmX%20%3D%20window.event.clientX%20%2B%20document.body.scrollLeft%3B%20%0D%0AmY%20%3D%20window.event.clientY%20%2B%20document.body.scrollTop%3B%20%0D%0Aif%20((mX%20%3C%20parseInt(vDiv.style.left))%20%7C%7C%20(mX%20%3E%20parseInt(vDiv.style.left)%2BvDiv.offsetWidth)%20%7C%7C%20%20%0D%0A(mY%20%3C%20parseInt(vDiv.style.top)-menu_height)%20%7C%7C%20(mY%20%3E%20parseInt(vDiv.style.top)%2BvDiv.offsetHeight))%20%7B%20%0D%0AvDiv.style.visibility%20%3D%20%22hidden%22%3B%20%0D%0Aisvisible%20%3D%20false%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Aif%20(isvisible%3D%3Dfalse)%20%0D%0A%7B%20%0D%0Afor%20(i%3D0%3Bi%3Clb.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Alistbox%3Deval(lb%5Bi%5D.listname)%20%0D%0Alistbutton%3Deval(lb%5Bi%5D.buttonname)%20%0D%0Alistvalue%3Deval(lb%5Bi%5D.valuename)%20%0D%0Alistbox.className%3D%22lostlist%22%3Blistbutton.className%3D%22menubar%22%20%0D%0Alistbox.gf%3D%220%22%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20ShowMenu(obj%2CvMnuCode%2CtWidth%2Cscroll)%20%7B%20%0D%0AvMnuCode%20%3D%20%22%3Ctable%20id%3D'submenu'%20cellspacing%3D0%20cellpadding%3D0%20bgcolor%3D%23ffffff%20border%3D0%20style%3D'width%3A%22%2BtWidth%20%2B%20%0D%0A%22%3Bborder-collapse%3A%20collapse'%20class%3D'listDiv'%3E%3Ctr%20height%3D23%3E%3Ctd%20nowrap%20align%3Dleft%3E%22%20%2B%20%20%0D%0AvMnuCode%20%2B%20%22%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E%22%3B%20%0D%0Amenu_height%20%3D%20obj.offsetHeight%3B%20%0D%0Amenu_width%20%3D%20obj.offsetWidth%3B%20%0D%0Amenu_left%20%3D%20obj.offsetLeft%20%2B%20leftMar%2B2%3B%20%0D%0Amenu_top%20%3D%20obj.offsetTop%20%2B%20topMar%20%2B%20menu_height%20%2B%20space-3%3B%20%0D%0AvParent%20%3D%20obj.offsetParent%3B%20%0D%0Awhile%20(vParent.tagName.toUpperCase()%20!%3D%20%22BODY%22)%20%0D%0A%7B%20%0D%0Amenu_left%20%2B%3D%20vParent.offsetLeft%3B%20%0D%0Amenu_top%20%2B%3D%20vParent.offsetTop%3B%20%0D%0AvParent%20%3D%20vParent.offsetParent%3B%20%0D%0A%7D%20%0D%0AlistDiv.innerHTML%20%3D%20vMnuCode%3B%20%0D%0AlistDiv.style.top%20%3D%20menu_top%3B%20%0D%0AlistDiv.style.left%20%3D%20menu_left%3B%20%0D%0Aif%20(scroll%3D%3D0)%20%7BlistDiv.style.overflow%3D%22visible%22%3BlistDiv.style.width%3DtWidth%7D%20%0D%0Aelse%20%7BlistDiv.style.overflow%3D%22scroll%22%3BlistDiv.style.width%3DtWidth%2B18%7D%20%0D%0AlistDiv.style.visibility%20%3D%20%22visible%22%3B%20%0D%0Avar%20cssopaction%3Dsubmenu.filters%5B0%5D.opacity%20%0D%0Asubmenu.filters%5B0%5D.opacity%3D0%3B%20%0D%0Asubmenu.filters%5B1%5D.Apply()%3B%20%0D%0Asubmenu.filters%5B0%5D.opacity%3D100%3B%20%0D%0Asubmenu.filters%5B1%5D.Play()%3B%20%0D%0A%0D%0Aisvisible%20%3D%20true%3B%20%0D%0A%7D%20%0D%0Afunction%20menuitem(lightcolor%2Cnormalcolor%2Cicon%2Ctitle%2Curl)%20%0D%0A%7B%20%0D%0Athis.lightcolor%3Dlightcolor%20%0D%0Athis.normalcolor%3Dnormalcolor%20%0D%0Athis.icon%3Dicon%20%0D%0Athis.title%3Dtitle%20%0D%0Athis.url%3Durl%20%0D%0A%7D%20%0D%0Afunction%20bulidmenu(arrayname)%20%0D%0A%7B%20%0D%0Avar%20menuarray%3Deval(arrayname)%20%0D%0Amenucontent%3D'%3Ctable%20border%3D%220%22%20width%3D%22100%25%22%3E'%20%0D%0Afor%20(i%3D0%3Bi%3Cmenuarray.length%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aif%20(menuarray%5Bi%5D.title!%3D%22_line%22)%20%0D%0A%7B%20%0D%0Aif%20(menuarray%5Bi%5D.url!%3D%22_disable%22)%7Bcss%3D%22getitem%22%7Delse%7Bcss%3D%22lostitem%22%7D%20%0D%0Aif%20(menuarray%5Bi%5D.icon.length%3D%3D0)%20%0D%0A%7B%20%0D%0Acontent%3D'%3Ctable%20cellspacing%3D%220%22%20cellpadding%3D%220%22%3E%3Ctr%3E%3Ctd%20style%3D%22text-indent%3A4px%22%20class%3D%22'%2Bcss%2B'%22%3E'%2Bmenuarray%5Bi%5D.title%2B'%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E'%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Acontent%3D'%3Ctable%20cellspacing%3D%220%22%20cellpadding%3D%220%22%3E%3Ctr%3E%3Ctd%20width%3D%2220%22%20nowrap%3E%3Cimg%20src%3D%22'%2Bmenuarray%5Bi%5D.icon%2B'%22%3E%3C%2Ftd%3E%3Ctd%20class%3D%22'%2Bcss%2B'%22%3E'%2Bmenuarray%5Bi%5D.title%2B'%3C%2Ftd%3E%3C%2Ftr%3E%3C%2Ftable%3E'%20%0D%0A%7D%20%0D%0Aif%20(menuarray%5Bi%5D.url!%3D%22_disable%22)%7B%20%0D%0Amenucontent%3Dmenucontent%2B'%3Ctr%3E%3Ctd%20height%3D16%20style%3D%22cursor%3Adefault%22%20onmouseover%3D%22style.backgroundColor%3D%5C''%2B%20menuarray%5Bi%5D.lightcolor%2B'%5C'%22%20onmouseout%3D%22style.backgroundColor%3D%5C''%2B%20menuarray%5Bi%5D.normalcolor%2B'%5C'%22%20onclick%3D%22Golist(%5C''%2Bmenuarray%5Bi%5D.title%2B'%5C')%22%3E'%2Bcontent%2B'%3C%2Ftd%3E%3C%2Ftr%3E'%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Amenucontent%3Dmenucontent%2B'%3Ctr%3E%3Ctd%20height%3D16%20style%3D%22fitler%3Agray%22%3E'%2Bcontent%2B'%3C%2Ftd%3E%3C%2Ftr%3E'%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Amenucontent%3Dmenucontent%2B'%3Ctr%3E%3Ctd%20height%3D4%3E%3Cimg%20src%3D%22images%2Fdock.gif%22%20width%3D%2299%25%22%20height%3D1%3E%3C%2Ftd%3E%3C%2Ftr%3E'%20%0D%0A%7D%20%0D%0A%0D%0A%7D%20%0D%0Amenucontent%3Dmenucontent%2B%22%3C%2Ftable%3E%22%20%0D%0Areturn%20menucontent%20%0D%0A%7D%20%0D%0Afunction%20HL_Menu(obj%2Cstate)%20%0D%0A%7B%20%0D%0Aswitch%20(state)%20%0D%0A%7B%20%0D%0Acase%200%3A%20%0D%0Aobj.className%3D%22menuover%22%20%0D%0Abreak%3B%20%0D%0Acase%201%3A%20%0D%0Aobj.className%3D%22menuup%22%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Avar%20lb%3Dnew%20Array()%20%0D%0Alb%5B0%5D%3Dnew%20listbox('listbox0'%2C'listbutton0'%2C'listvalue0')%20%0D%0Alb%5B1%5D%3Dnew%20listbox('listbox1'%2C'listbutton1'%2C'listvalue1')%20%0D%0A%0D%0Avar%20list1%3Dnew%20Array()%20%0D%0Alist1%5B0%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem1%22%2C%22%22)%20%0D%0Alist1%5B1%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem2%22%2C%22%22)%20%0D%0Alist1%5B2%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem3%22%2C%22%22)%20%0D%0Alist1%5B3%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem4%22%2C%22%22)%20%0D%0Alist1%5B4%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem5%22%2C%22%22)%20%0D%0Alist1%5B5%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem6%22%2C%22%22)%20%0D%0Alist1%5B6%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem7%22%2C%22%22)%20%0D%0Alist1%5B7%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem8%22%2C%22%22)%20%0D%0Alist1%5B8%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem9%22%2C%22%22)%20%0D%0Alist1%5B9%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22ListItem10%22%2C%22%22)%20%0D%0Ablist1%3Dbulidmenu(%22list1%22)%20%0D%0A%0D%0Avar%20list2%3Dnew%20Array()%20%0D%0Alist2%5B0%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%931%22%2C%22%22)%20%0D%0Alist2%5B1%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%932%22%2C%22%22)%20%0D%0Alist2%5B2%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%933%22%2C%22%22)%20%0D%0Alist2%5B3%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%934%22%2C%22%22)%20%0D%0Alist2%5B4%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%935%22%2C%22%22)%20%0D%0Alist2%5B5%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%936%22%2C%22%22)%20%0D%0Alist2%5B6%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%937%22%2C%22%22)%20%0D%0Alist2%5B7%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%938%22%2C%22%22)%20%0D%0Alist2%5B8%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%939%22%2C%22%22)%20%0D%0Alist2%5B9%5D%3Dnew%20menuitem(%22%23B1CBE4%22%2C%22%22%2C%22%22%2C%22%E5%AD%97%E4%BD%9310%22%2C%22%22)%20%0D%0Ablist2%3Dbulidmenu(%22list2%22)%20%0D%0Afunction%20Golist(text)%20%0D%0A%7B%20%0D%0Alistvalue%3Deval(lb%5Blistnum%5D.valuename)%20%0D%0Alistvalue.innerText%3Dtext%20%0D%0AvDiv%20%3D%20document.all(%22listDiv%22)%3B%20%0D%0AvDiv.style.visibility%20%3D%20%22hidden%22%3B%20%0D%0Aisvisible%20%3D%20false%3B%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E"> 
<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"> 
<div id=listDiv style='border:1px #636563 solid;VISIBILITY: hidden;POSITION: absolute;overflow:scroll;height:150'></div> 
<table border="0" width="100%" id="table27" class="bodybar" cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
<table border="0" cellspacing="0" cellpadding="0" height="30"> 
<tr> 
<td><table border="0" cellspacing="0" cellpadding="0" height="22"> 
<tr> 
<td width="5"></td> 
<td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup"> 
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">文件(F)</td></tr></table> 
</td> 
<td width="5"></td> 
<td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup"> 
<table border="0" cellspacing="0" cellpadding="0"><tr><td class="leftitem">编辑(E)</td></tr></table> 
</td> 
</tr> 
</table></td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
<table border="1" width="100" id="table28" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" style="border-collapse: collapse"> 
<tr> 
<td class="menubar"> 
<table border="0" width="100%" id="table29" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="10" nowrap> 
<table border="0" width="2" cellspacing="0" cellpadding="1" id="table30"> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
</table></td> 
<td width="35" nowrap><font size="2">姓名</font></td> 
<td width="130" nowrap> 
<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"'></td> 
<td width="35" nowrap><font size="2">密码</font></td> 
<td width="124" nowrap> 
<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"'></td> 
<td width="5" nowrap><img style="border:1px inset" height=14 width=0></td> 
<td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup"> 
<table cellspacing="0" cellpadding="0" id="table31" width="25"><tr><td nowrap></td><td class="leftitem"> 
登陆</td></tr></table> 
</td> 
<td width="100%" nowrap>　</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
<tr> 
<td> 
<table border="1" width="100" id="table32" cellspacing="0" cellpadding="4" bgcolor="#F7F7F7" style="border-collapse: collapse"> 
<tr> 
<td class="menubar"> 
<table border="0" width="100%" id="table33" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="10" nowrap> 
<table border="0" width="2" cellspacing="0" cellpadding="1" id="table34"> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
<tr> 
<td><img style="border:1px inset" height=1 width=1></td> 
</tr> 
</table></td> 
<td width="78" nowrap> 
<div id="listbox0" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist1,0)' style="cursor:default"> 
<table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table35"> 
<tr> 
<td valign=center style="text-indent:4px"><font size="2" face="Verdana"> 
<span id=listvalue0> 
</span></font></td> 
<td width=12 align="center" class="menubar" id="listbutton0"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" id="table36"> 
<tr height=1> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
</tr> 
<tr height=1> 
<td></td> 
<td bgcolor="#000000"></td> 
<td bgcolor="#000000"></td> 
<td bgcolor="#000000"></td> 
<td></td> 
</tr> 
<tr height=1> 
<td></td> 
<td></td> 
<td bgcolor="#000000"></td> 
<td></td> 
<td></td> 
</tr> 
</table></td> 
</tr> 
</table>

</div></td> 
<td width="78" nowrap> 
<div id="listbox1" class="lostfocus" gf="0" onmouseover='listaction(this,0)' onmouseout='listaction(this,1)' onclick='listaction(this,2,blist2,1,100)' style="cursor:default"> 
<table border="0" cellpadding="0" cellspacing="0" width="100" height="18" id="table37"> 
<tr> 
<td valign=center style="text-indent:4px"><font size="2" face="Verdana"><span id=listvalue1> 
</span></font></td> 
<td width=12 align="center" class="menubar" id="listbutton1"> 
<table border="0" cellpadding="0" style="border-collapse: collapse" id="table38"> 
<tr height=1> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
<td width="1" bgcolor="#000000"></td> 
</tr> 
<tr height=1> 
<td></td> 
<td bgcolor="#000000"></td> 
<td bgcolor="#000000"></td> 
<td bgcolor="#000000"></td> 
<td></td> 
</tr> 
<tr height=1> 
<td></td> 
<td></td> 
<td bgcolor="#000000"></td> 
<td></td> 
<td></td> 
</tr> 
</table></td> 
</tr> 
</table>

</div></td> 
<td width="4" nowrap> 
　</td> 
<td width="5" nowrap><img style="border:1px inset" height=14 width=0></td> 
<td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup"> 
<table cellspacing="0" cellpadding="0" id="table39" width="16"><tr><td nowrap></td><td class="leftitem" align=center> 
<b>B</b></td></tr></table> 
</td> 
<td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup"> 
<table cellspacing="0" cellpadding="0" id="table40" width="16"><tr><td nowrap></td><td class="leftitem" align=center> 
<i> 
<b>I</b></i></td></tr></table> 
</td> 
<td nowrap align="center" onmouseover="HL_Menu(this,0)" onmouseout="HL_Menu(this,1)" class="menuup"> 
<table cellspacing="0" cellpadding="0" id="table41" width="16"><tr><td nowrap></td><td class="leftitem" align=center> 
<u> 
<b>U</b></u></td></tr></table> 
</td> 
<td width="100%" nowrap>　</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
<p><font size="2" color="#FFFFFF">工作之余做了这个小东西
仿Office 2003的工具条,主要尝试不用任何图片(当然不可能把所有按扭都做出来),所有的控件都是用Css和java-script做的
菜单就不做了，偷懒中

感兴趣的朋友可以和我联系，大家交流交流．</font></p> 
<p><b><font size="2" color="#FFFFFF"><a href="mailto:puterjam@etang.com" _ewebeditor_ta_href="mailto%3Aputerjam%40etang.com"> 
<font color="#FFFFFF" face="Arial">[email]PuterJam@etang.com[/email]</font></a></font></b> 
</p> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程