《网页设计与制作（活页式）》 课件 项目5 列表和超链接.pptx

网页设计与制作项目五列表和超链接N

知识目标掌握无序、有序及定义列表的使用掌握超链接标签的使用掌握CSS伪类

5.1.1无序列表任务5.1列表标签ul是英文unorderedlist的缩写，翻译为中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用ul标签定义，内部可以嵌套多个li标签，li是列表项。定义无序列表的基本语法格式如下：ulli列表项1/lili列表项2/lili列表项3/li.../ul

5.1.1无序列表任务5.1列表标签li标签嵌套在ul标签中，用于描述具体的列表项，ul标签中至少应包含一个li标签。ul和li标签都拥有type属性，用于指定列表项目符号，不同type属性值可以呈现不同的项目符号。

5.1.1无序列表任务5.1列表标签无序列表常用的type属性值及显示效果

5.1.1无序列表任务5.1列表标签实例1使用无序列表若不设置type属性时，列表项目符号显示为默认的“●”，设置type属性后，列表项目符号会按相应的样式显示。

5.1.2有序列表任务5.1列表标签ol是英文orderedlist的缩写，翻译为中文是有序列表。有序列表是一种强调排列顺序的列表，使用ol标签定义，内部可以嵌套多个li标签。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：olli列表项1/lili列表项2/lili列表项3/li.../ol

5.1.2有序列表任务5.1列表标签在上面的语法中，ol/ol标签用于定义有序列表，li/li标签为具体的列表项，和无序列表类似，每对ol/ol标签中也至少应包含一对li/li标签。在有序列表中，除type属性之外，还可以为ol标签定义start属性，为li标签定义value属性，它们决定有序列表的项目符号

5.1.2有序列表任务5.1列表标签有序列表相关的属性和描述

5.1.2有序列表任务5.1列表标签实例2使用有序列表本例定义了两个有序列表。其中，第8~12行代码中的有序列表没有任何属性，第13~17行代码中的有序列表的列表项应用了type和value属性，用于设置特定的列表项目符号。

5.1.2有序列表任务5.1列表标签若不定义列表项目符号时，有序列表的列表项默认按“1，2，3…”的顺序排列。当使用type或value定义列表项目符号时，有序列表的列表项按指定项目符号显示。

5.1.3定义列表任务5.1列表标签dl是英文definitionlist短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即dldtdd。定义列表的基本语法格式如下：dldt名词1/dtdd是名词1的描述信息1/dddd是名词1的描述信息2/dd...dt名词2/dtdd是名词2的描述信息1/dddd是名词2描述信息2/dd.../dl

5.1.3定义列表任务5.1列表标签在上面的语法中，dl标签用于指定定义列表，dt标签和dd标签并列嵌套于dl标签中。其中，dt标签用于指定术语名词，dd标签用于对名词进行解释和描述。一对dt标签可以对应多对dd标签，即可以对一个名词进行多项解释。

5.1.3定义列表任务5.1列表标签实例3使用定义列表第8~14行代码定义了一个定义列表，其中dt标签中为名词“红色”，其后紧跟着四对dd标签，用于对dt标签中的名词进行解释和描述。相对于dt标签中的术语或名词，dd标签中解释和描述性的内容会产生一定的缩进效果。

5.1.4列表的嵌套应用任务5.1列表标签在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干子类。同样，在使用列表时，列表项中也有可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套，列表嵌套只需将子列表嵌套在上一级列表的列表项中。

5.1.4列表的嵌套应用任务5.1列表标签实例4饮品页面列表嵌套饮品页面中首先定义了一个包含两个列表项的无序列表，然后在第1个列表项中嵌套一个有序列表，在第2个列表项中嵌套一个无序列表。咖啡和茶进行了第2次分类，咖啡分类为拿铁和摩卡，茶分类为龙井和碧螺春。

任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.1list-style-type属性在CSS中，list-style-type属性用于控制列表项显示符号的类型，其取值有多种，它们的显示效果各不相同

任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.1list-style-type属性list-style-type属性值及含义

任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.1list-style-type属性实例5设置列表样式第13~17行代码定义了一