|
|
挑战微软“动态菜单”之一
名称： |
挑战微软“动态菜单”之一
|
实例：
|
|
| 教程： |
第一步：将下面的CSS定义样式单加入<head></head>之间：
<STYLE>A:link {
TEXT-DECORATION: none
}
A:hover {
COLOR: red
}
A.bb {
TEXT-DECORATION: underline
}
A.cc {
COLOR: black
}
A.cc:hover {
COLOR: white
}
.LeftNavOff {
BACKGROUND-COLOR: white; BORDER-BOTTOM: white 2px solid; BORDER-LEFT: white 2px solid; BORDER-RIGHT: white 2px solid; BORDER-TOP: white 2px solid; COLOR: black; CURSOR: hand; FONT-SIZE: 14px;FONT-FAMILY: 宋体; LETTER-SPACING: -0.5pt; LINE-HEIGHT: 14pt; MARGIN: 2px 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 0px; TEXT-DECORATION: none
}
.LeftNavUp {
BACKGROUND-COLOR: #0099ff; BORDER-BOTTOM: #003399 2px solid; BORDER-LEFT: #99ccff 2px solid; BORDER-RIGHT: #003399 2px solid; BORDER-TOP: #99ccff 2px solid; COLOR: white; CURSOR: hand; FONT-SIZE: 14px;FONT-FAMILY: 宋体; FONT-WEIGHT: bold; HEIGHT: 0pt; LETTER-SPACING: -0.5pt; LINE-HEIGHT: 14pt; MARGIN: 2px 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 0px; TEXT-DECORATION: none;
}
</STYLE>
第二步：将下面的代码加入<body></body>之间：
<table border="0" width="33%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item1 language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a class=cc href="../tip/index.html">心得技巧文集</a></td>
</tr>
<tr>
<td width="100%" height="14px"><img border="0" src="1pbw.gif" width="185px" height="1px"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item2 language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a class=cc href="../library/index.html">制作素材精品</a></td>
</tr>
<tr>
<td width="100%" height="14px"><img border="0" src="1pbw.gif" width="185px" height="1px"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item3 language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a class=cc href="../download/index.html">本站资料下载</a></td>
</tr>
<tr>
<td width="100%" height="14px"><img border="0" src="1pbw.gif" width="185px" height="1px"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item4 language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a class=cc href="http://www.boil.net/cgi-bin/ubb/Ultimate.cgi">网页制作论坛</a></td>
</tr>
<tr>
<td width="100%" height="14px"><img border="0" src="1pbw.gif" width="185px" height="1px"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item5 language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a class=cc href="index.html">Dhtml技术栏目</a></td>
</tr>
<tr>
<td width="100%" height="14px"><img border="0" src="1pbw.gif" width="185px" height="1px"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item6 language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a class=cc href="http://netschool.myweb.com.cn">网页设计师</a></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
|
| 说明： |
以上的超链接部分改为你自己的就可以使用了。
本按钮突起效果只在IE5.0版本下面有效，但可以在低版本和NC正常显示
本菜单的效果在微软网站的windows产品站可以看到。
|
|