轻松制作IE式按钮条
第一步：准备按钮的图片
每个按钮只要一个彩色图片即可。这里有一个小技巧：只要找一些图标并转成GIF文件就行了，大的按钮用32×32的图标，小的按钮用16×16的图标。这样的图片即好看体积又小。这里假设我们要做一个按钮：功能是在新窗口打开home.html，图片名为home.gif。
第二步：在你的网页头中加入以下几行CSS代码
<STYLE TYPE=“text/css”>
.TDUp {border-bottom: 1 solid #808080;
border-left: 1 solid #FFFFFF;
border-right: 1 solid #808080;
border-top: 1 solid #FFFFFF;}?牓?
.TDDown{border-bottom: 1 solid #C0C0C0;
border-left: 1 solid #C0C0C0;
border-right: 1 solid #C0C0C0;
border-top: 1 solid #C0C0C0;
filter:gray;}?牓?
</STYLE>
这里的TDUp定义是鼠标移到按钮上时的样式（即突出时），第一行意思是按钮底边1像素宽、实心、深灰色；第二行意思是按钮左边1像素宽、实心、白色；第三行定义右边，同底边；第四行定义顶边，同左边。TDDown定义的是鼠标移出按钮时的样式（即平常状态），第一行意思是按钮底边1像素宽、实心、灰色；第二、三、四行分别定义左、右顶边，同底边；第五行定义了按钮为灰度效果显示，即不显示彩色。要说明网页底色为灰色（即普通菜单条的颜色）时的样式，底色如为其他颜色，TDUp中四边的颜色要做相应调整，TDDown中四边的颜色要定义成底色。
第三步：将你的网页底色设为灰色
<BODY BGCOLOR=“#C0C0C0”>
第四步：在你的网页中需加入按钮的地方加入如下代码
<TABLE>
<TR>
<TD CLASS=“TDDown” ONMOUSEOVER=“className=＇TDUp＇ ”ONMOUSEOUT=“className=＇TDDown＇ ”ONCLICK=“window.open（＇home.html＇，＇_blank＇）”>
<IMG SRC=“home.gif” ALT=“打开HOME” BORDER=“0”>
</TD>
</TR>
</TABLE>
这里用了一个表格，其中第三行的意思是：本单元格一般使用TDDown样式，当鼠标移入时使用TDUp样式，当鼠标移出时恢复TDDown样式，当鼠标在本单元格上点击时，在新窗口打开home.html。第四行就是我们刚才准备的图片。
为什么不用<A>来打开页面而要用ONCLICK？这是因为<A>做链接时有几个缺点：1.鼠标移到上面时会变成手形；2.点击后图片上会留下一个难看的虚线框（焦点）；3.如果单元格比图片宽（为了美观一般都比图片宽），则只有当鼠标在图片上点击才有效而在其他地方点击时无效（虽然这时也在按钮上）。特别是第2、3条缺点使得我们的按钮条与真正的IE按钮条相差甚远。
我要一排几个按钮，不，我要一列几个按钮，啊不，我要几行几列按钮怎么办？只需照上面的样子加几个<TD></TD>就是一排按钮，加几个<TR></TR>就是一列按钮，组合起来就是N行N列了，你看着加吧。
另外，最好将网页设计成框架形式，将按钮条当成一个框架，将打开的页面放在另一个框架内，这样就更完美了。你也可以不用灰度效果而做成其他效果，如ALPHA效果、光晕效果等等，全看你的喜好。
好了，到此为止，全部搞定，快将下面所附代码录入并存成一个HTML文件看看效果吧。或者到我的主页上瞧瞧（我主页上的按钮是ALPHA效果），我的主页：http://sunlight.spedia.net。
附：实例源代码
<HTML>
<HEAD>
<STYLE TYPE=“text/css”>
.TDUp {border-bottom: 1 solid #808080;
border-left: 1 solid #FFFFFF;
border-right: 1 solid #808080;
border-top: 1 solid #FFFFFF;}?牓?
.TDDown {border-bottom:1 solid #C0C0C0;??
border-left: 1 solid #C0C0C0;
border-right: 1 solid #C0C0C0;
border-top: 1 solid #C0C0C0;
filter:gray;}?牓?
</STYLE>
</HEAD>
<BODY BGCOLOR=“#C0C0C0”>
<TABLE>
<TR>
<TD CLASS=“TDDown” ONMOUSEOVER=“className=＇TDUp＇” ONMOUSEOUT=“className=＇TDDown＇ ”ONCLICK=“window.open （＇home.html＇_blank＇）”>
<IMG SRC=“home.gif” ALT=“打开HOME” BORDER=“0”>
</TD>
</TR>
</TABLE>
</BODY>
</HTML> ??