网页设计与制作（HTML+CSS+JS）-3期（KC003） CSS3列表设置 4列表样式设置.pptx

1 列表样式设置 Part ◎定义列表的基本样式 ◎列表布局实例 1 定义列表的基本样式 1. 列表符号list-style-type 列表符号属性用于设定列表项的符号。 语法： list-style-type:值； list-style-type用来设置多种符号作为列表项的符号，其具体取值范围见表所示。 属性值 含义 none 不显示任何项目符号或编码 disc 以实心圆形●作为项目符号 circle 以实心圆形○作为项目符号 square 以实心方块■作为项目符号 decimal 以普通阿拉伯数字1、2、3……作为项目编号 lower-roman 以小写罗马数字ⅰ、ⅱ、ⅲ……作为项目编号 upper-roman 以大写罗马数字Ⅰ、Ⅱ、Ⅲ……作为项目编号 lower-alpha 以小写英文字母a、b、c……作为项目编号 upper-alpha 以大写英文字母A、B、C……作为项目编号 2. 图像符号list-style-image 图像符号属性使用图像作为列表项目符号，以美化页面。 语法： list-style-image: none | url(图像地址)； none表示不指定图像；url则使用绝对或相对地址指定作为符号的图像。 如果使用“list-style-image”定义列表图像时，通常需要先设置“list-style-type”为“none”，然后再设置list-style- image的值。 3.列表缩进list-style-position 列表缩进属性用于设定列表缩进的设置。 语法： list-style-position: outside | inside； outside表示列表项目标记放置在文本以外，且环绕文本不根据标记对齐 inside是列表的默认属性，表示列表项目标记放置在文本以内，且环绕文本根据标记对齐 4. 复合属性：列表list-style 列表函数list-style是以上3种列表属性的组合。 语法： list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ] 此属性是设定列表样式的快捷的综合写法。 用这个属性可以同时设置列表样式类型属性(list-style-type)，列表样式位置属性(list-style-position)和列表样式图片属性(list-style-image)。 举例演示 【实例5-12】列表属性样式设置。 代码：list-style:none outside url(img/arrow.gif); 举例演示 【实例5-13】列表布局。 列表的布局的垂直导航 鼠标放置到菜单选项后的效果