使用Web标准建站第11天不用表格的菜单.docVIP

布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片： 　　样式表：#logo MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px; 页面代码： div id logo a title 网页设计师 href / img height 80 alt 链接到首页 src images/logo_w3cn_200x80.gif width 200 / [被屏蔽广告]　　以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用 当图片不能显示的时候就显示替换文字 ，所以不要只写成无意义的图片名称。 　　接下来是定义菜单。 1.不用表格的菜单 纵向 我们先来看菜单的最终效果： 　　通常方法我们至少嵌套2层表格来实现这样的菜单，间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现；背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码，你会看到只有如下几句： div id menu a title 网站标准 href /webstandards.html 什么是网站标准 a title 标准的好处 href /benefits.html 使用标准的好处 a title 怎样过渡 href /howto.html 怎样过渡 a title 相关教程 href /tutorial.html 相关教程 a title 工具 href /tools.html 工具 a title 资源及链接 href /resources.html 资源及链接 没有用任何table,而用的是无序列 ，整个菜单的效果实现的秘密完全在于id menu，我们再来看CSS中关于menu的定义： 1 首先定义了menu层的主要样式: #menu MARGIN: 15px 20px 0px 15px; ?/*定义层的外边框距离*/PADDING:15px; ???/*定义层的内边框为15px*/BACKGROUND: #dfdfdf; ??/*定义背景颜色*/COLOR: #666; ???/*定义字体颜色*/BORDER:#fff 2px solid; ?/*定义边框为2px白色线条*/WIDTH:160px; ???/*定义内容的宽度为160px*/ 2 其次定义无序列表的样式： #menu ul MARGIN: 0px;PADDING: 0px;BORDER: medium none; /*不显示边框*/LINE-HEIGHT: normal; LIST-STYLE-TYPE: none; #menu li BORDER-TOP: #FFF 1px solid; MARGIN: 0px; 说明：这里用的是id选择器的派生方法定义 参考第7天：CSS入门的介绍 了在menu层中的子元素 和 的样式。LIST-STYLE-TYPE: none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP: #FFF 1px solid;则定义了菜单之间的1px间隔线。 3 定义onmouseover效果 #menu li a PADDING:5px 0px 5px 15px;DISPLAY: block; FONT-WEIGHT: bold; BACKGROUND: url images/icon_dot_lmenu.gif transparent no-repeat 2px 8px; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none; #menu li a:hover BACKGROUND: url images/icon_dot_lmenu2.gif #C61C18 no-repeat 2px 8px;COLOR: #fff; 解释如下： display:block;表示将标签a当作块级元素来显示，使得链接变成一个按钮； BACKGROUND: url images/icon_dot_lmenu.gif transparent no-repeat 2px 8px;这一句定义了替代li的小圆点的图标。transparent指背景为透明，2px 8px指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句：BACKGROUND-IMAGE: url images/icon_dot_lmenu.gif ; BACKGROUND-POSITIO