2005-09-13[原] 仿Office 2003的工具条
TAG：CSS 代码分享 原创看到网上有篇《仿Office 2003的工具条》，于是自己也简单的做了一个。
借鉴了文章里对<input>鼠标事件的处理方法。
-------------------------------源码-----------------------------------------
<style type="text/css">
<!--
.lostfocus {
background-color: #FFFFFF;
border: 1px #FFFFFF solid;
font: 12px Arial;
vertical-align: baseline;
}
.getfocus {
background-color: #FFFFFF;
border: 1px #08246B solid;
font: 12px Arial;
vertical-align: baseline;
}
.leftitem {
cursor: hand;
padding: 0 2px 0;
text-align: center;
vertical-align: baseline;
width: 30px;
}
.leftitemover {
background-color: #C2D5F8;
border: 1px #6495ED solid;
cursor: hand;
padding: 0 2px 0;
text-align: center;
vertical-align: middle;
width: 30px;
}
.leftitemdown{
background-color: #E4EDFC;
border: 1px #6495ED solid;
cursor: hand;
padding: 0 2px 0;
text-align: center;
width: 30px;
}
.menubar {
filter: progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#F7F7F7, endcolorstr=#DEDBD6);
font-size: 12px;
height: 30px;
width: 368px;
}
.botimg{
border: 1px inset;
width: 1px;
}
-->
</style>
<body style="background-color:#BFBFBF;">
<table class="menubar">
<td>
<img class="botimg" /><br />
<img class="botimg" /><br />
<img class="botimg" /><br />
<img class="botimg" /><br />
<img class="botimg" /><br />
<img class="botimg" /><br />
</td>
<td>
姓名
<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 height=16 class="botimg" style="vertical-align:bottom;">
</td>
<td class="leftitem" gf="0" onmouseover='this.className="leftitemOver"' onmouseout='if (this.gf=="0") this.className="leftitem"' onblur='this.className="leftitem";this.gf="0"' onmousedown='this.className="leftitemDown";this.gf="0"' onfocus='this.className="leftitem";this.gf="1"'>
<a>登陆</a>
</td>
</table>
