网页设计课件ch5列表项目.pptxVIP

第5章 列表项目第一页，共二十页。第5章 列表项目 5.1 无序列表ul5.2 有序列表ol5.3 嵌套列表5.4 描述性列表dl/dt/dd 第二页，共二十页。5.1 无序列表ul无序列表（Unordered list）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的列表。定义无序列表需要使用无序列表标记符UL/UL和列表项（List item）标记符LI/LI（结束标记符可省略）第三页，共二十页。无序列表语法 1．格式： ul type=值 li项目符号 li项目符号 …… /ul 2．说明： ① 使用type属性来控制标号的类型，见表5.1 ② 在同一个无序列表中，下一个li的出现，就表明上一个列表项的结束。第四页，共二十页。type取值 含义 type=disc 设定一个实心圆点的行标号●，默认项 type= circle 设定一个空心圆点的行标号○ type=square 设定一个方形实心的行标号■ 无序列表的type属性表第五页，共二十页。无序列表示例ulliTodayliTommorow/ul ul type=squareliTodayliTommorow/ul 第六页，共二十页。5.2 有序列表ol 有序列表（Ordered list）：也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。第七页，共二十页。有序列表的定义定义有序列表需要使用有序列表标记符OL/OL和列表项（List item）标记符LI/LI（结束标记符可省略），语法如下：　ol type=值1 start=值2 li项目符号 li项目符号 …… /ol第八页，共二十页。 2．说明： ① 在同一个有序列表中，下一个li的出现，就表明上一个列表项的结束。 ② 顺序编号是由属性type和start来设置的。type表示标号的类型，比如数字、字母以及罗马字母；start属性表示列表清单的标号从第几项开始 表5.2列出了type属性的取值及含义。第九页，共二十页。type取值 含义 type=1 表示列表项用数字标号（1，2，3…），默认项 type=A 表示列表项用大写字母标号（A，B，C…） type=a 表示列表项用小写字母标号（a,b,c…） type=i 表示列表项用大写罗马字母标号（i，ii，iii…） type=I 表示列表项用小写罗马字母标号（I，II，III…） 有序列表的TYPE属性表第十页，共二十页。有序列表示例olliTodayliTommorow/ol ol type=aliTodayliTommorow/ol ol type=IliTodayliTommorow/ol 第十一页，共二十页。定制列表元素 定制表中的标记 li type=# #=disk, circle, square 示例：ulli type=discONEli type=circleTWOli type=squareTHREE/ul 第十二页，共二十页。定制列表元素定制有序列表表中的序号 li type=# #=A, a, I, i, 1 示例：olli type=AONE-ONEliONE-TWO/ol olli type=IONE-ONEliONE-TWO/ol第十三页，共二十页。定制列表元素定制有序列表表中的序号的起始值 　ol start=# #=number 示例：ol start=5 li type=AONE-ONE liONE-TWO 　ol start=10 liTWO-ONE li type=iTWO-TWO /ol/ol 第十四页，共二十页。5.3 嵌套列表 将一个列表嵌入另一个列表中，作为另一个列表的一部分，叫做嵌套列表。HTML可以用层层嵌套的方式来实现多层列表。 无论是有序列表还是无序列表的嵌套，浏览器都可以自动地分层排列。第十五页，共二十页。嵌套列表示例olliONE-ONEliONE-TWO ul liTWO-ONE liTWO-TWO ol liTWO-ONE liTWO-TWO/ol/ul/ol第十六页，共二十页。5.4 描述性列表dl/dt/dd 描述性列表允许比较复杂的列表说明，不只可以分项说明，还可以针对每一个小项目再加以说明。1．格式： dl dt项目1 dd项目1的说明1 …… dt项目2 dd项目2的说明1 …… /dl第十七页，共二十页。 2．说明： ① 首标签dl和尾标签/dl之间的内容就是描述性列表的内容，由一系列用描述项标签dt或解释项标签dd标识的列表项组成。 ② dt和dd标签都是单独标签，位于列表项的开头，分别表示该项是描述项和解释项。 ③ dt和dd标签通常是成对出现的，即一个描述项对应于一个解释项。一个描述项也可以对应于几个解释项，但最好不要出现几个描