网页设计列表项目.ppt

第 5 章 列表项目,第5章 列表项目,5.1 无序列表ul 5.2 有序列表ol 5.3 嵌套列表 5.4 定义列表dl/dt/dd,无序列表样本,无序列表（Unordered list）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的列表。 定义无序列表需要使用无序列表标记符和列表项（List item）标记符（结束标记符可省略）,5.1 无序列表ul,1格式： 项目符号 项目符号 2说明： 使用type属性来控制标号的类型，见表5.1 在同一个无序列表中，下一个的出现，就表明上一个列表项的结束。,无序列表ul,无序列表的type属性表,无序列表示例, 奥运加油 中国加油 奥运加油 中国加油 ,有序列表（Ordered list）：也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。,5.2 有序列表ol,定义有序列表需要使用有序列表标记符和列表项（List item）标记符（结束标记符可省略），语法如下： 项目符号 项目符号 ,有序列表的定义, 在同一个有序列表中，下一个的出现，就表明上一个列表项的结束。 顺序编号是由属性type和start来设置的。type表示标号的类型，比如数字、字母以及罗马字母；start属性表示列表清单的标号从第几项开始 表5.2列出了type属性的取值及含义。,说明：,有序列表的TYPE属性表,有序列表示例,湖南长沙理工大学 湖南长沙理工大学 湖南长沙理工大学 ,定制列表元素,定制表中的标记 #=disk, circle, square 示例： ONE TWO THREE ,定制列表元素,定制有序列表表中的序号 #=A, a, I, i, 1 示例： ONE-ONE ONE-TWO ONE-ONE ONE-TWO ,定制列表元素,定制有序列表表中的序号的起始值 #=number 示例： ONE-ONE ONE-TWO ,将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表。HTML可以用层层嵌套的方式来实现多层列表。 无论是有序列表还是无序列表的嵌套，浏览器都可以自动地分层排列。,5.3 嵌套列表,嵌套列表示例, One-One One-Two Two-One Two-Two Three-One Three-Two One-Three ,定义列表(Definition List)允许比较复杂的列表说明，不只可以分项说明，还可以针对每一个小项目再加以说明。,1格式： 项目1 项目1的说明1 项目2 项目2的说明1 ,5.4 定义列表dl/dt/dd, 首标签和尾标签之间的内容就是描述性列表的内容，由一系列用描述项标签或解释项标签标识的列表项组成。 和标签都是单独标签，位于列表项的开头，分别表示该项是描述项和解释项。 和标签通常是成对出现的，即一个描述项对应于一个解释项。一个描述项也可以对应于几个解释项，但最好不要出现几个描述项对应于同一个解释项的情况。 在显示时，解释项的内容会自动缩进一定的距离，使列表的结构更加清晰。,说明：,定义列表示例, 定义列表(Definition List)： 野生动物 所有非经人工饲养而生活于自然环境下的各种动物。 宠物 指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。 ,本章结束,