蛙蛙推荐:微软MSDN导航菜单演示(Javascript+CSS2)

<!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>
        
<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>
        
<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>
        
<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>
        
<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>
        
<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>
        
<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&amp;categoryid=10">在线资源</A>
        
</TD>
    
<TD>
        
<SPAN class=ltsep>|</SPAN>
    
</TD>
    
<TD class=lt0 onmouseover="mhHover('msviLocalToolbar', 14, 'lt1')" 
    onmouseout
="mhHover('msviLocalToolbar', 14, 'lt0')" noWrap>
        
<href="http://msdn.microsoft.com/worldwide.aspx" >MSDN 全球站点</A>
    
</TD>
    
<TD width="100%"></TD>
    
</TR>
    
</TBODY>
    
</TABLE>
    
</DIV>
</body>
</html>


不了解CSS和HTML里的边框,不定,宽度,填充的概念的可以参考下面的图

posted @ 2005-07-14 11:50  蛙蛙王子  Views(...)  Comments(...Edit  收藏