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