项目5 列表和超链接（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目五 列表和超链接 N 1 知识目标 掌握无序、有序及定义列表的使用 掌握超链接标签的使用 掌握CSS伪类 ‹#› 网页设计与制作 2 5.1.1 无序列表 任务5.1列表标签 ul是英文unordered list的缩写，翻译为中文是无序列表。无序列表是一种不分排序的列表，各个列表项之间没有顺序级别之分。无序列表使用<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是英文ordered list的缩写，翻译为中文是有序列表。有序列表是一种强调排列顺序的列表，使用<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是英文definition list短语的缩写，翻译为中文是定义列表。定义列表与有序列表、无序列表不同，它包含了三个标签，即<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>标签环绕需要被链接的对象即可，其基本语法格式如下： <a href="跳转目标" 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〓综合案例——制作新闻列表 ‹#› 网页设计与制作 项目小结 本项目主要介绍了使用列表和超链接，具体内容如下。 列表标签： 介绍了无序列表、有序列表、定义列表和列表的嵌套应用。 CSS控制列表样式： 介绍了list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。 超链接： 介绍了创建超链接和锚点链接。 链接伪类控制超链接： 介绍了使用超链接伪类选择器。 制作新闻列表： 介绍了新闻列表的CSS样式。 通过本项目的学习，能够掌握列表和超链接的设置方式，完成网页中列表模块和链接模块的设置。 谢谢 $$