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

网页设计与制作项目五

列表和超链接N

知识目标掌握无序、有序及定义列表的使用掌握超链接标签的使用掌握CSS伪类5.1.1无序列表任务5.1列表标签ul是英文unorderedlist的缩写，翻译为中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用<ul>标签定义，内部可以嵌套多个<li>标签，<li>是列表项。定义无序列表的基本语法格式如下：<ul><li>列表项1</li><li>列表项2</li><li>列表项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>标签。例如，网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。定义有序列表的基本语法格式如下：<ol><li>列表项1</li><li>列表项2</li><li>列表项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短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即<dl><dt><dd>。定义列表的基本语法格式如下：<dl><dt>名词1</dt><dd>是名词1的描述信息1</dd><dd>是名词1的描述信息2</dd>...<dt>名词2</dt><dd>是名词2的描述信息1</dd><dd>是名词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行代码定义了一个无序列表，第19~23行代码定义了一个有序列表。对无序列表应用“list-style-type：square；”将其列表项显示符号设置为实心方块；同时，对有序列表应用“list-style-type：decimal；”将其列表项显示符号设置为阿拉伯数字。任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.2list-style-image属性一些常规的列表项显示符号并不能满足网页制作的需求，为此CSS提供了list-style-image属性，其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.2list-style-image属性实例6使用list-style-image属性第7行代码通过list-style-image属性为列表项添加了图像任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.2list-style-image属性列表项目图像和列表项没有对齐，这是因为list-style-image属性对列表项目图像的控制能力不强。因此，一般不使用list-style-image属性，常通过为<li>标签设置背景图像的方式实现列表项目图像。任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.3list-style-position属性设置列表项目符号时，有时需要控制列表项目符号的位置，即列表项目符号相对于列表项内容的位置。在CSS中，list-style-position属性用于控制列表项目符号的位置，其取值有inside和outside。inside指列表项目符号位于列表文本以内，outside指列表项目符号位于列表文本以外。任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.3

list-style-position

属性实例7使用list-style-position属性控制列表项显示符号的位置任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.3list-style-position属性实例7使用list-style-position属性控制列表项显示符号的位置第7行代码对第1个无序列表应用“list-style-position：inside；”，使其列表项目符号位于列表文本以内，而第8行代码对第2个无序列表应用“list-style-position：outside；”，使其列表项显示符号位于列表文本以外。为使显示效果更加明显，在第9行代码中对<li>设置了边框样式。任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.4list-style属性

在CSS中，列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style属性综合设置列表样式的语法格式如下：list-style：列表项显示符号列表项显示符号的位置列表项目图像；使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.4list-style属性实例8使用list-style属性定义一个无序列表，第7~8行代码通过复合属性list-style分别控制<ul>标签和第一个<li>标签的样式任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.4list-style属性实例9使用背景属性定义列表项显示符号任务1.3〓网页制作工具任务5.2CSS控制列表样式5.2.4list-style属性添加一个定义列表，其中第8行代码通过“list-style：none；”清除列表的默认显示样式；第11行代码通过为<dd>设置背景图像的方式来定义列表项显示符号；第19行代码在<dt>内部增加了一张熊猫的图片任务1.3〓网页制作工具任务5.3超链接5.3.1创建超链接超链接在网页中占有不可替代的地位，在HTML5中创建超链接非常简单，只需用<a>标签环绕需要被链接的对象即可，其基本语法格式如下：<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>任务1.3〓网页制作工具任务5.3超链接5.3.1创建超链接在上面的语法格式中，<a>标签是一个行内标签，用于定义超链接，href和target为其常用属性，具体介绍如下。（1）href：用于指定链接目标的url地址，当为<a>标签设置href属性时，它就具有了超链接的功能。（2）target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。任务1.3〓网页制作工具任务5.3超链接5.3.1创建超链接实例10创建超链接创建两个超链接，通过href属性将它们的链接目标分别指定为“知网”和“百度”，同时通过target属性定义第1个链接页面在原窗口打开，第2个链接页面在新窗口打开任务1.3〓网页制作工具任务5.3超链接5.3.1创建超链接被<a>标签环绕的文本“知网”和“百度”颜色特殊且带有下画线效果，这是因为超链接标签本身有默认的显示样式。当鼠标指针移至链接文本时，指针变为抓手形状，同时页面的左下角会显示链接页面的地址。当单击链接文本“知网”和“百度”时，分别会在原窗口和新窗口中打开链接页面。任务1.3〓网页制作工具任务5.3超链接5.3.2锚点链接如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条来查看所需要的内容，这样不仅效率较低，而且不方便操作。为了提高信息的检索速度，HTML5语言提供了一种特殊的链接——锚点链接。通过创建锚点链接，能够直接跳转到指定位置的内容。任务1.3〓网页制作工具任务5.3超链接5.3.2锚点链接实例11创建锚点链接任务1.3〓网页制作工具任务5.3超链接5.3.2锚点链接实例11创建锚点链接单击前单击后

使用<a>标签应用href属性，其中href属性=“#id”，如第10~14行代码所示，只要单击创建了超链接的对象就会跳到指定位置的内容任务1.3〓网页制作工具任务5.4链接伪类控制超链接定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和指针悬停时的样式不同。CSS通过链接伪类可以实现不同的链接状态。任务1.3〓网页制作工具任务5.4链接伪类控制超链接<a>的伪类及描述任务1.3〓网页制作工具任务5.4链接伪类控制超链接实例12使用超链接伪类选择器工具任务5.4链接伪类控制超链接实例12使用超链接伪类选择器默认颜色鼠标悬停颜色鼠标单击时颜色鼠标单击后颜色任务1.3〓网页制作工具任务5.5〓综合案例——制作新闻列表实例13制作新闻列表任务1.3〓网页制作工具任务5.5〓综合案例