商务网页第21课.pptxVIP

属性描述list-style在一个声明中设置所有的列表属性list-style-image将图像设置为列表项的图标list-style-position设置列表项标记的放置位置list-style-type设置列表项标记的类型4.7.4 制作导航栏综合范例制作导航栏有很多种技术，采用文本列表的边框与边距技术制作导航栏是最简洁实用的技术之一。在CSS中，有序列表标签ol和无序列表标签ul基本没有区别，列表项有序还是无序、如何编号是通过list-style-type属性来定义的，还可以采用list-style-image属性来指定列表项的图标。列表项的主要属性list-style-type的常见属性值值描述none无标记disc默认。标记是实心圆circle标记是空心圆square标记是实心方块decimal标记是数字decimal-leading-zero0开头的数字标记（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等)值 描述none 此元素不会被显示block 此元素将显示为块级元素，此元素前后会带有换行符inline 默认。此元素将显示为内联元素，元素前后没有换行符inherit 规定应该从父元素继承display属性的值另，容器类元素均具有display属性，该属性是制作导航栏需要使用。display属性常见值1．制作纵向排列导航栏利用文本列表制作导航栏，首先在CSS中做好如下工作。 需要定义DIV块的尺寸，适合用于确定导航栏（文本列表）的位置。 定义一个文本列表及其整体样式，定义好边距。 制作列表项，做出纵向分隔符的美观效果。 制作列表项超链接整体样式。 制作列表项超链接在未访问、已访问的显示效果，以及鼠标指针经过时的显示效果，通过反差效果增强美感，要充分利用左边框的颜色做好突出显示。然后，在HTML中设置DIV标签、文本列表及列表项，并设置列表项的超链接。htmlheadtitle纵向导航栏/titlestyle 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; /* 设置列表项背景色 */ color:#FFFFFF; /* 设置列表项文字颜色 */ border-left:15px solid #000099; /* 使用左边框设置 显示出对比效果 */ } .menu li a:hover{ /* 设置鼠标指针经过列表项时的样式，形成反差 */ background-color: #000099; /* 改变列表背景色 */ color: #FFFF00; /* 改变文字颜色 */ border-left:15px solid #