商务网页第21课.pptVIP

4.7.4 制作导航栏综合范例 制作导航栏有很多种技术，采用文本列表的边框与边距技术制作导航栏是最简洁实用的技术之一。 在CSS中，有序列表标签ol和无序列表标签ul基本没有区别，列表项有序还是无序、如何编号是通过list-style-type属性来定义的，还可以采用list-style-image属性来指定列表项的图标。 列表项的主要属性 属性 描述 list-style 在一个声明中设置所有的列表属性 list-style-image 将图像设置为列表项的图标 list-style-position 设置列表项标记的放置位置 list-style-type 设置列表项标记的类型 list-style-type的常见属性值 值 描述 none 无标记 disc 默认。标记是实心圆 circle 标记是空心圆 square 标记是实心方块 decimal 标记是数字 decimal-leading-zero 0开头的数字标记（01, 02, 03等） lower-roman 小写罗马数字（i, ii, iii, iv, v等） upper-roman 大写罗马数字（I, II, III, IV, V等） lower-alpha 小写英文字母（a, b, c, d, e等） upper-alpha 大写英文字母（A, B, C, D, E等） lower-latin 小写拉丁字母（a, b, c, d, e等） upper-latin 大写拉丁字母（A, B, C, D, E等) 另，容器类元素均具有display属性，该属性是制作导航栏需要使用。 display属性常见值 值 描述 none 此元素不会被显示 block 此元素将显示为块级元素，此元素前后会带有换行符 inline 默认。此元素将显示为内联元素，元素前后没有换行符 inherit 规定应该从父元素继承display属性的值 1．制作纵向排列导航栏 利用文本列表制作导航栏，首先在CSS中做好如下工作。 需要定义DIV块的尺寸，适合用于确定导航栏（文本列表）的位置。 定义一个文本列表及其整体样式，定义好边距。 制作列表项，做出纵向分隔符的美观效果。 制作列表项超链接整体样式。 制作列表项超链接在未访问、已访问的显示效果，以及鼠标指针经过时的显示效果，通过反差效果增强美感，要充分利用左边框的颜色做好突出显示。 然后，在HTML中设置DIV标签、文本列表及列表项，并设置列表项的超链接。 html head title纵向导航栏/title style body{ background-color: #33CCFF; } .menu { /* 定义类选择符.menu的整体样式 */ width:130px; text-align:right; vertical-align:middle; font-family:宋体; font-size:1em; color:#FFFFFF; } .menu ul { /* 用文本列表制作导航栏的整体样式 */ list-style-type:none; /* 不显示项目符号 */ margin:0px; /* 设置内外边距很重要，确定显示位置 */ padding:0px; } .menu li { /* 设置列表项的样式 */ border-bottom:1px solid #CCCCCC; /* 利用下边框做出 分割线效果 */ } .menu li a{ /* 设置列表项的超链接整体样式 */ display:block; /* 设置列表项为块级元素 */ height:1.5em; padding:2px; text-decoration:none; /* 去掉下划线 */ } .menu li a:link, .menu li a:visited{ /* 设置超链接未访问、 已访问的显示效果 */ background-color: #0066CC; /* 设置列表项背景色 */