<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>微软MSDN导航菜单</title>
<style type="text/css">
<!--
/**//*有些样式是可以继承的,外层定义过的效果,内层元素默认会自动继承,而且还要搞清楚CSS样式的优先级*/
/**//*文档边距为0*/
BODY {}{
MARGIN: 0px
}
/**//*整个导航栏被包含在一个DIV标签里,这是这个DIV的样式,这里只设置了上下边框,而没有设置左右边框*/
#msviLocalToolbar {}{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 1px;
PADDING-TOP: 2px; /**//*设置上下左右的填充*/
BORDER-TOP: #999 1px solid;
BORDER-BOTTOM: #999 1px solid; /**//*设置上下边框的颜色,宽度和样式*/
FONT-SIZE: 100%; /**//*字体大小100%*/
BACKGROUND: #f1f1f1; /**//*背景颜色为#f1f1f1*/
}
/**//*导航栏里包含的TD标签的样式,这里只设置了字体尺寸*/
#msviLocalToolbar TD {}{
FONT-SIZE: 100%
}
/**//*导航栏里包含的A标签的样式,这里设置了A元素的样式,就是所有msviLocalToolbar里包含的A元素都默认继承的.*/
#msviLocalToolbar A {}{
FONT: 70% Verdana; /**//*链接文字尺寸和字体*/
COLOR: black; /**//*链接颜色*/
TEXT-DECORATION: none /**//*设置链接没有下划线,没有任何样式*/
}
/**//*导航主标题样式,这里设置了宽,这个样式会用在一个单元格里*/
#msviHomePageLink {}{
PADDING-LEFT: 2px;/**//*左边补丁边距为2象素*/
WIDTH: 177px; /**//*宽177象素*/
}
/**//*导航主标题里的单元格样式*/
#msviHomePageLink TD {}{
FONT-SIZE: 100%;/**//*字符尺寸为100%*/
}
/**//*导航主标题里的A标签样式*/
#msviHomePageLink A {}{
BACKGROUND: #f1f1f1; /**//*背景色为#f1f1f1*/
MARGIN: 0px; /**//*四边的外延边距都设置成0象素*/
WHITE-SPACE: nowrap; /**//*强制在同一行内显示所有文本，直到文本结束或者遭遇br对象*/
DISPLAY: block; /**//*链接正常显示,并在链接后添加新行*/
PADDING-LEFT: 6px; /**//*左边补丁为6象素*/
PADDING-RIGHT: 6px; /**//*右边补丁为6象素*/
PADDING-TOP: 2px; /**//*上边补丁为2象素*/
PADDING-BOTTOM: 2px; /**//*下边补丁为2象素*/
BORDER-LEFT: #f1f1f1 1px solid; /**//*左边框为1象素#f1f1f1颜色实线*/
BORDER-TOP: #f1f1f1 1px solid; /**//*上边框为1象素#f1f1f1颜色实线*/
BORDER-RIGHT: #f1f1f1 1px solid; /**//*右边框为1象素#f1f1f1颜色实线*/
BORDER-BOTTOM: #f1f1f1 1px solid; /**//*下边框为1象素#f1f1f1颜色实线*/
}
/**//*导航主题里当鼠标放在链接上时的样式,这时候链接的边框颜色和背景颜色都变了,所以当鼠标划过链接时链接会有所变化,上面注释过的CSS属性我下面就不注释了.*/
#msviHomePageLink A:hover {}{
MARGIN: 0px;
DISPLAY: block;
BACKGROUND: #ccc;
PADDING-TOP: 2px;
PADDING-BOTTOM: 2px;
PADDING-LEFT: 6px;
PADDING-RIGHT: 6px;
BORDER-LEFT: #999 1px solid;
BORDER-TOP: #999 1px solid;
BORDER-RIGHT: #999 1px solid;
BORDER-BOTTOM: #999 1px solid;
}
/**//*这个样式用在a元素上,当鼠标在链接上离开时使用这个样式,不过.lt0和.lt1这两个样式是通过一个js函数来切换的*/
.lt0 {}{
BORDER-RIGHT: #f1f1f1 1px solid;
PADDING-RIGHT: 6px;
BORDER-TOP: #f1f1f1 1px solid;
PADDING-LEFT: 6px;
BACKGROUND: #f1f1f1;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #f1f1f1 1px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #f1f1f1 1px solid
}
/**//*这个是定义当鼠标放在链接上时使用的样式*/
.lt1 {}{
BORDER-RIGHT: #999 1px solid;
PADDING-RIGHT: 6px;
BORDER-TOP: #999 1px solid;
PADDING-LEFT: 6px;
BACKGROUND: #ccc;
PADDING-BOTTOM: 0px;
BORDER-LEFT: #999 1px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #999 1px solid
}
/**//*单元格之间间隔的样式,用在一个小竖线上*/
.ltsep {}{
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px; FONT: 70% Verdana; COLOR: #a9a9a9; PADDING-TOP: 0px
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
//替换某个容器里指定元素的样式
function mhHover(tbl,idx,cls)
{
var t,d; //定义两个变量
//设置变量t为tb1的引用,不过if语句里那句我不知道有什么用,我记得getElementById函数需要参数的.
//可能是测试浏览器特性的,根据浏览器特性来保证能正确获取tb1的引用
if(document.getElementById)t=document.getElementById(tbl);
else t=document.all(tbl);
if(t==null)return;
//设置d为tb1容器里的所有TD元素集合
if(t.getElementsByTagName)d=t.getElementsByTagName("TD");
else d=t.all.tags("TD");
if(d==null)return;
//判断获取TD元素集合的长度是否比idx还小,因为要设置下标为idx的元素的样式,所以必须要加这个判断
if(d.length<=idx)return;
//设置td集合里的第idx-1个元素的样式为cls,因为没两个内容单元格之间有个间隔单元格,所以调用该函数的时候要搞清楚到底要设置第几个单元格的样式.
d[idx].className=cls;
}
</script>
</head>
<body>
<DIV id=msviLocalToolbar>
<TABLE height=19 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD id=msviHomePageLink noWrap>
<A href="http://www.microsoft.com/china/msdn/default.aspx" >MSDN 主页</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 2, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 2, 'lt0')" noWrap>
<A href="http://www.microsoft.com/china/msdn/DeveloperCenter/default.mspx">开发中心</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 4, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 4, 'lt0')" noWrap>
<A href="http://www.microsoft.com/china/msdn/library/default.mspx">技术资源库</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 6, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 6, 'lt0')" noWrap>
<A href="http://www.microsoft.com/china/msdn/events/default.mspx">活动与培训</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 8, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 8, 'lt0')" noWrap>
<A href="http://www.microsoft.com/china/msdn/download/default.mspx">下载中心</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 10, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 10, 'lt0')" noWrap>
<A href="http://www.microsoft.com/china/community/developer/default.mspx">开发者社区</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 12, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 12, 'lt0')" noWrap>
<A href="http://www.microsoft.com/downloads/search.aspx?displaylang=zh-cn&categoryid=10">在线资源</A>
</TD>
<TD>
<SPAN class=ltsep>|</SPAN>
</TD>
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 14, 'lt1')"
onmouseout="mhHover('msviLocalToolbar', 14, 'lt0')" noWrap>
<A href="http://msdn.microsoft.com/worldwide.aspx" >MSDN 全球站点</A>
</TD>
<TD width="100%"></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</body>
</html>
