HTML+CSS+JavaScript项目5-教学讲解课件

项目5

“穿搭速递”首页面制作·列表样式的控制·CSS伪类·列表标记·超链接标记HTML项目5“穿搭速递”首页面制作·列表样式的控制·列表标【任务5-1】列表标记【任务5-2】CSS控制列表样式【任务5-3】超链接标记【任务5-4】制作“穿搭速递”首页面目录【任务5-1】列表标记【任务5-2】CSS控制列表样式【任务知识引入需求分析为了便于用户阅读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的主题市场分类，排列有序、条理清晰，呈现为列表的形式。为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表，下面将对这3种列表进行讲解。【任务5-1】列表标记知识引入需求分析为了便于用户阅读，经常将网页信息以列表的形式12有序列表ol3定义列表dl知识引入无序列表ul4列表的嵌套应用【任务5-1】知识储备12有序列表ol3定义列表dl知识引入无序列表ul4列表的嵌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】知识点讲解1、无序列表ul<ul>

<li>列表项1</li>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】知识点讲解2、有序列表ol<ul>

<li>列表项1</li>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】知识点讲解3、定义列表dl<dl>【任务5-1】知识点讲解4、列表的嵌套应用在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套。【任务5-1】知识点讲解4、列表的嵌套应用【任务5-1】知识点讲解知识引入需求分析在【任务5-1】中只能定义单一的列表样式，然而实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系列的列表属性。下面对CSS中相关的列表样式属性进行详细讲解。【任务5-2】CSS控制列表样式知识引入需求分析在【任务5-1】中只能定义单一的列表样式，然12背景图像定义列表项目符号知识引入list-style复合属性【任务5-2】知识储备12背景图像定义列表项目符号知识引入list-style复合1、list-style复合属性同盒子模型的边框等属性一样，在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style复合属性设置列表样式的语法格式如下：使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。list-style:列表项目符号列表项目符号的位置列表项目图像;【任务5-2】知识点讲解1、list-style复合属性list-style:列表项2、背景图像定义列表项目符号由于列表样式对列表项目符号的控制能力不强，所以实际工作中常通过为<li>设置背景图像的方式实现列表项目符号的控制。【任务5-2】知识点讲解2、背景图像定义列表项目符号【任务5-2】知识点讲解知识引入需求分析一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需要在首页相应的位置添加超链接。例如，当登录传智播客官网时，首先看到的是其首页，当点击导航栏中的“原创教材”栏目时，会跳转到“原创教材”页面，这是因为导航栏中的“原创教材”添加了超链接功能。下面，将对超链接标记的创建及样式控制进行详细讲解。【任务5-3】超链接标记知识引入需求分析一个网站通常由多个页面构成，如果想从首页跳转12锚点链接知识引入创建超链接3链接伪类控制超链接【任务5-3】知识储备12锚点链接知识引入创建超链接3链接伪类控制超链接【任务5-1、创建超链接在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。创建超链接的基本语法格式如下：上述语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，对它们的具体解释如下。href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>【任务5-3】知识点讲解1、创建超链接<ahref="跳转目标"target="1、创建超链接注意:暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。【任务5-3】知识点讲解1、创建超链接注意:【任务5-3】知识点讲解2、锚点链接浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接—锚点链接，它属于超链接的一种。通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为定义锚点和链接到锚点两步，具体如下：使用“<ahref="#id名">链接文本</a>”创建链接文本使用相应的id名标注跳转目标的位置【任务5-3】知识点讲解2、锚点链接【任务5-3】知识点讲解3、链接伪类控制超链接在CSS中，通过链接伪类可以实现不同的链接状态。所谓伪类并不是真正意义上的类，它的名称是由系统定义的，通常由标记名、类名或id名加“：”构成。超链接标记<a>的伪类有4种，具体如下表所示。【任务5-3】知识点讲解3、链接伪类控制超链接【任务5-3】知识点讲解3、链接伪类控制超链接注意:同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。【任务5-3】知识点讲解3、链接伪类控制超链接注意:【任务5-3】知识点讲解最终效果如图所示：【任务5-4】布局及定义基础样式最终效果如图所示：【任务5-4】布局及定义基础样式效果如图所示：【任务5-5】制作头部导航模块效果如图所示：【任务5-5】制作头部导航模块【任务5-6】制作banner和精品展示模块效果如图所示：【任务5-6】制作banner和精品展示模块效果如图所示：效果如图所示：【任务5-7】制作潮流前沿模块效果如图所示：【任务5-7】制作潮流前沿模块效果如图所示：【任务5-8】制作版权信息模块效果如图所示：【任务5-8】制作版权信息模块建议读者认真体会列表和超链接的用法，能够熟练地运用列表与超链接组织页面元素。制作项目时，熟练掌握CSS控制列表和超链接，并注意清除列表和超链接的默认样式。在实际工作中，注意超链接伪类的几种状态，能够设置超链接在点击前、点击后和鼠标悬停时的样式。初学者需要多加练习哦！项目总结建议读者认真体会列表和超链接的用法，能够熟练地运用列表与超链项目5

“穿搭速递”首页面制作·列表样式的控制·CSS伪类·列表标记·超链接标记HTML项目5“穿搭速递”首页面制作·列表样式的控制·列表标【任务5-1】列表标记【任务5-2】CSS控制列表样式【任务5-3】超链接标记【任务5-4】制作“穿搭速递”首页面目录【任务5-1】列表标记【任务5-2】CSS控制列表样式【任务知识引入需求分析为了便于用户阅读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的主题市场分类，排列有序、条理清晰，呈现为列表的形式。为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表，下面将对这3种列表进行讲解。【任务5-1】列表标记知识引入需求分析为了便于用户阅读，经常将网页信息以列表的形式12有序列表ol3定义列表dl知识引入无序列表ul4列表的嵌套应用【任务5-1】知识储备12有序列表ol3定义列表dl知识引入无序列表ul4列表的嵌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】知识点讲解1、无序列表ul<ul>

<li>列表项1</li>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】知识点讲解2、有序列表ol<ul>

<li>列表项1</li>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】知识点讲解3、定义列表dl<dl>【任务5-1】知识点讲解4、列表的嵌套应用在网上购物商城中浏览商品时，经常会看到某一类商品被分为若干小类，这些小类通常还包含若干的子类，同样，在使用列表时，列表项中也有可能包含若干子列表项。要想在列表项中定义子列表项就需要将列表进行嵌套。【任务5-1】知识点讲解4、列表的嵌套应用【任务5-1】知识点讲解知识引入需求分析在【任务5-1】中只能定义单一的列表样式，然而实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系列的列表属性。下面对CSS中相关的列表样式属性进行详细讲解。【任务5-2】CSS控制列表样式知识引入需求分析在【任务5-1】中只能定义单一的列表样式，然12背景图像定义列表项目符号知识引入list-style复合属性【任务5-2】知识储备12背景图像定义列表项目符号知识引入list-style复合1、list-style复合属性同盒子模型的边框等属性一样，在CSS中列表样式也是一个复合属性，可以将列表相关的样式都综合定义在一个复合属性list-style中。使用list-style复合属性设置列表样式的语法格式如下：使用复合属性list-style时，通常按上面语法格式中的顺序书写，各个样式之间以空格隔开，不需要的样式可以省略。list-style:列表项目符号列表项目符号的位置列表项目图像;【任务5-2】知识点讲解1、list-style复合属性list-style:列表项2、背景图像定义列表项目符号由于列表样式对列表项目符号的控制能力不强，所以实际工作中常通过为<li>设置背景图像的方式实现列表项目符号的控制。【任务5-2】知识点讲解2、背景图像定义列表项目符号【任务5-2】知识点讲解知识引入需求分析一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需要在首页相应的位置添加超链接。例如，当登录传智播客官网时，首先看到的是其首页，当点击导航栏中的“原创教材”栏目时，会跳转到“原创教材”页面，这是因为导航栏中的“原创教材”添加了超链接功能。下面，将对超链接标记的创建及样式控制进行详细讲解。【任务5-3】超链接标记知识引入需求分析一个网站通常由多个页面构成，如果想从首页跳转12锚点链接知识引入创建超链接3链接伪类控制超链接【任务5-3】知识储备12锚点链接知识引入创建超链接3链接伪类控制超链接【任务5-1、创建超链接在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。创建超链接的基本语法格式如下：上述语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，对它们的具体解释如下。href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>【任务5-3】知识点讲解1、创建超链接<ahref="跳转目标"target="1、创建超链接注意:暂时没有确定链接目标时，通常将<a>标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。【任务5-3】知识点讲解1、创建超链接注意:【任务5-3】知识点讲解2、锚点链接浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接—锚点链接，它属于超链接的一种。通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为定义锚点和链接到锚点两步，具体如下：使用“<ahref="#id名">链接文本</a>”创建链接文本使用相应的id名标注跳转目标的