HTML+CSS+JavaScript项目5 “穿搭速递”首页面制作_0524_连蕊.pptVIP

? 本章小结 项目5 “穿搭速递”首页面制作 · 列表样式的控制 · CSS伪类 · 列表标记 · 超链接标记 HTML 【任务5-1】 列表标记 【任务5-2】 CSS控制列表样式 【任务5-3】 超链接标记 【任务5-4】 制作“穿搭速递”首页面 ? 目录 需求分析 为了便于用户阅读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的主题市场分类，排列有序、条理清晰，呈现为列表的形式。为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表，下面将对这3种列表进行讲解。 【任务5-1】列表标记 1 2 有序列表ol 3 定义列表dl 无序列表ul 4 列表的嵌套应用 【任务5-1】知识储备 1、无序列表ul 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下： 上述语法中，ul/ul标记用于定义无序列表，li/li标记嵌套在ul/ul标记中，用于描述具体的列表项，每对ul/ul中至少应包含一对li/li。 ul li列表项1/li li列表项2/li li列表项3/li....../ul 【任务5-1】知识点讲解 2、有序列表ol 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下： 上述语法中，ul/ul标记用于定义无序列表，li/li标记嵌套在ul/ul标记中，用于描述具体的列表项，每对ul/ul中至少应包含一对li/li。 ul li列表项1/li li列表项2/li li列表项3/li....../ul 【任务5-1】知识点讲解 3、定义列表dl 定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。其基本语法如下： 在上面的语法中，dl/dl标记用于指定定义列表，dt/dt和dd/dd并列嵌套于dl/dl中，其中，dt/dt标记用于指定术语名词，dd/dd标记用于对名词进行解释和描述。一对dt/dt可以对应多对dd/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】知识点讲解 4、列表的嵌套应用 在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套。 【任务5-1】知识点讲解 需求分析 在【任务5-1】中只能定义单一的列表样式，然而实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系列的列表属性。下面对CSS中相关的列表样式属性进行详细讲解。 【任务5-2】CSS控制列表样式 1 2 背景图像定义列表项目符号 list-style复合属性 【任务5-2】知识储备 1、list-style复合属性 同盒子模型的边框等属性一样，在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style复合属性设置列表样式的语法格式如下： 使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。 list-style:列表项目符号 列表项目符号的位置 列表项目图像; 【任务5-2】知识点讲解 2、背景图像定义列表项目符号 由于列表样式对列表项目符号的控制能力不强，所以实际工作中常通过为li设置背景图像的方式实现列表项目符号的控制。 【任务5-2】知识点讲解 需求分析 一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需要在首页相应的位置添加超链接。例如，当登录传智播客官网时，首先看到的是其首页，当点击导航栏中的“原创教材”栏目时，会跳转到“原创教材”页面，这是因为导航栏中的“原创教材”添加了超链接功能。下面，将对超链接标记的创建及样式控制进行详细讲解。 【任务5-3】超链接标记 1 2 锚点链接 创建超链接 3 链接伪类控制超链接 【任务5-3】知识储备 1、创建超链接 在HTML中创建超链接非常简单，只需用a/a标记环绕需要被链接的对象即可。创建超链接的基本语法格式如下： 上述语法中，a标记是一个行内标记，用于定义超链接，href和target为其常用属性，对它们的具体解释如下。 href：用于指定链接目标的url地址，当为a标记应用href属性时，它就具有了超链接的功能。 target：用于指定链接页面的打