最近公司领导说我们做的网页不够美观实用,朴素大方,让我们多学习一些CSS知识来美化网页,微软的网站是这么多网站里很有代表性的,所以我抽取了一下来学习. 微软MSDN地址:http://www.microsoft.com/china/msdn/ ,我模拟了一下它最上面的那个导航菜单,用了一些css和一个javascript函数,微软的网站上有好多好看的元素,可以供我们参考.我在样式表和函数里加了注释,方便以后修改以生成不同的效果

<!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&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>

        <A href="http://msdn.microsoft.com/worldwide.aspx" >MSDN 全球站点</A>

    </TD>

    <TD width="100%"></TD>

    </TR>

    </TBODY>

    </TABLE>

    </DIV>

</body>

</html>

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