网页设计与制作项目教程项目5-“穿搭速递”首页面课件

项目5“穿搭速递”首页面制作·

超链接标记·CSS伪类·列表标记·列表样式

HTML项目5“穿搭速递”首页面制作·超链接标记·列表标记H学习目标掌握列表标记，能够使用列表对网页中的信息进行简单的排序。1掌握了解熟悉掌握超链接标记，能够使用超链接实现页面间的跳转。2了解css伪类，能够运用链接伪类控制超链接。4熟悉列表样式的控制，能够运用CSS定义丰富的列表项目符号。3学习目标掌握列表标记，能够使用列表对网页中的信息进行简单的排目录CSS控制列表样式☞点击查看本小节知识架构超链接标记☞点击查看本小节知识架构布局及定义基础样式【任务5-1】列表标记☞点击查看本小节知识架构【任务5-2】【任务5-3】【任务5-4】目录CSS控制列表样式☞点击查看本小节知识架构超链接标记目录制作banner和精品展示模块制作潮流前沿模块制作版权信息模块【任务5-5】制作头部导航模块【任务5-6】【任务5-7】【任务5-8】目录制作banner和精品展示模块制作潮流前沿模块制作版1无序列表ul有序列表ol知识架构2

【任务5-1】列表标记定义列表dl列表的嵌套应用341无序列表ul有序列表ol知识架构2知识架构1list-style复合属性背景图像定义列表项目符号2

【任务5-2】CSS控制列表样式知识架构1list-style复合属性背景图像定义列表项知识架构1创建超链接3链接伪类控制超链接锚点链接2

【任务5-3】超链接标记知识架构1创建超链接3链接伪类控制超链接锚点链接2

【任务5-1】列表标记下面将对这三种列表进行详细地讲解。为了便于用户阅读，经常将网页信息以列表的形式呈现，为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表。【任务5-1】列表标记下面将对这

无序列表ul知识点概述无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......</ul>基本语法格式

【任务5-1】列表标记1.无序列表ul知识点概述无序列表是网页中最常用的列表，

无序列表ul不赞成使用无序列表的type属性，一般通过CSS样式属性替代。<li>与</li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标记中输入文字的做法是不被允许的。

【任务5-1】列表标记1.无序列表ul不赞成使用无序列表的type属性，一般通

有序列表ol知识点概述有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......</ol>基本语法格式

【任务5-1】列表标记2.有序列表ol知识点概述有序列表即为有排列顺序的列表，

定义列表dl知识点概述定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。<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知识点概述在网页设计中，定义列表常用于实现图文混排效果，其中<dt></dt>标记中插入图片，<dd></dd>标记中放入对图片解释说明的文字。

【任务5-1】列表标记3.定义列表dl知识点概述在网页设计中，定义列表常用于实列表的嵌套应用知识点概述要想在列表项中定义子列表项就需要将列表进行嵌套。

【任务5-1】列表标记4.列表的嵌套应用知识点概述要想在列表项中定义子列表项就实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系列的列表属性。下面，将针对CSS中相关的列表样式属性进行详细讲解。

【任务5-2】CSS控制列表样式实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系list-style复合属性知识点概述定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。list-style:列表项目符号列表项目符号的位置列表项目图像;基本语法格式

【任务5-2】CSS控制列表样式1.list-style复合属性知识点概述定义列表常用于单调的列表项目符号往往并不能满足网页制作的需求，这时就需要使用CSS中的背景图像属性，通过图像的url（路径）为各列表项设置更丰富的图像，使列表的样式变得更加美观。实际工作中，通常通过为<li>设置背景图像的方式实现列表项目符号的控制。

【任务5-2】CSS控制列表样式2.

背景图像定义列表项目符号单调的列表项目符号往往并不能满足网页制作的需求，这时就需要使

背景图像定义列表项目符号知识点概述由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为<li>设置背景图像的方式实现列表项目图像。

【任务5-2】CSS控制列表样式2.背景图像定义列表项目符号知识点概述由于列表样式对列表一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需要在首页相应的位置添加超链接。下面，将对超链接标记的创建及样式控制进行详细讲解。

【任务5-3】超链接标记一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需创建超链接知识点概述在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。<ahref="跳转目标"target="目标窗口的弹出方式">

文本或图像</a>基本语法格式

【任务5-3】超链接标记1.创建超链接知识点概述在HTML中创建超链接非常简单，

创建超链接对超链接标记的常用属性解释如下：href用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。

【任务5-3】超链接标记1.创建超链接对超链接标记的常用属性解释如下：href用

创建超链接知识点概述创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，这时为了不影响页面的美观，通常需要清除超链接图像的边框，使图像正常显示。具体示例代码如下：<ahref="#"><imgsrc="images/logo.gif"border="0"/></a>

【任务5-3】超链接标记1.创建超链接知识点概述创建图像超链接时，在某些浏览器中

锚点链接知识点概述浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接跳转到定位位置

【任务5-3】超链接标记2.锚点链接知识点概述浏览网站时，为了提高信息的检索速度

锚点链接使用“<ahref="#id名">链接文本</a>”创建链接文本。使用相应的id名标注跳转目标的位置。

【任务5-3】超链接标记2.锚点链接使用“<ahref="#id名">链接文本链接伪类控制超链接知识点概述在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。超链接标记<a>的伪类：

【任务5-3】超链接标记3.链接伪类控制超链接知识点概述在CSS中，通过链接伪类可以实同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。

【任务5-3】超链接标记链接伪类控制超链接3.同时使用链接的4种伪类时，通常按照a:link、a:visi网站项目“穿搭速递”首页面制作怎样制作“穿搭速递”首页呢？“穿搭速递”首页面制作网站项目“穿搭速递”首页面制作怎样制作“穿搭速递”首页呢？“

【任务5-4】布局及定义基础样式【任务5-4】布局及定拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义基础样式效果分析

【任务5-4】布局及定义基础样式建立站点切图准备工作拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义准备工作→建立站点1.创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step4

【任务5-4】布局及定义基础样式准备工作→建立站点1.创建网站根目录新建站点站点建立完成在根1.使用AdobeFireworksCS6的切片工具，导出“穿搭速递”首页面中的素材图片，存储在站点中的images文件夹中。准备工作→切图

【任务5-4】布局及定义基础样式1.使用AdobeFireworksCS6的切片工具，导效果分析2.HTML结构分析CSS样式分析“导航”模块和“版权信息”模块通栏显示，主体模块宽980px且居中显示。另外，页面背景为浅橙色，页面中的文字多为微软雅黑字体，可以通过CSS公共样式进行定义。“穿搭速递”页面整体上分为“导航”模块、“主体”模块、“版权信息”模块三部分。其中，主体模块又可以分为“banner”模块、“精品展示”模块、“潮流前沿”模块三部分。

【任务5-4】布局及定义基础样式效果分析2.HTML结构分析CSS“导航”模块和“版权效果分析2.“穿搭速递”首页面整体上分为三部分。其中，主体模块又可以分为banner模块、精品展示模块、潮流前沿模块三部分。

【任务5-4】布局及定义基础样式效果分析2.“穿搭速递”首页面整体上分为三部分。其中，主体模定义基础样式3./*重置浏览器的默认样式*/*{margin:0;padding:0;list-style:none;}/*全局控制*/body{background:#fff9ed;font-family:"微软雅黑";font-size:14px;}a:link,a:visited{text-decoration:none;color:#fff;font-size:16px;}

【任务5-4】布局及定义基础样式定义基础样式3./*重置浏览器的默认样式*/制作头部导航模块1.效果图如下所示：【任务5-5】制作头部导航模块制作头部导航模块1.效果图如下所示：【任务5-5】制作头部导制作banner和精品展示模块1.效果图如下所示：【任务5-6】制作banner和精品展示模块制作banner和精品展示模块1.效果图如下所示：【任务5-制作潮流前沿模块1.【任务5-7】制作潮流前沿模块效果图如下所示：制作潮流前沿模块1.【任务5-7】制作潮流前沿模块效果图如下制作版权信息模块1.效果图如下所示：【任务5-8】制作版权信息模块制作版权信息模块1.效果图如下所示：【任务5-8】制作版权信【项目总结】1.建议读者认真体会列表和超链接的用法，能够熟练地运用列表与超链接组织页面元素。2.制作项目时，熟练掌握CSS控制列表和超链接，并注意清除列表和超链接的默认样式。3.在实际工作中，注意超链接伪类的几种状态，能够设置超链接在点击前、点击后和鼠标悬停时的样式。初学者需要多加练习哦！【项目总结】1.建议读者认真体会列表和超链接的用法，能够熟练网页设计与制作项目教程项目5-“穿搭速递”首页面课件项目5“穿搭速递”首页面制作·

超链接标记·CSS伪类·列表标记·列表样式

HTML项目5“穿搭速递”首页面制作·超链接标记·列表标记H学习目标掌握列表标记，能够使用列表对网页中的信息进行简单的排序。1掌握了解熟悉掌握超链接标记，能够使用超链接实现页面间的跳转。2了解css伪类，能够运用链接伪类控制超链接。4熟悉列表样式的控制，能够运用CSS定义丰富的列表项目符号。3学习目标掌握列表标记，能够使用列表对网页中的信息进行简单的排目录CSS控制列表样式☞点击查看本小节知识架构超链接标记☞点击查看本小节知识架构布局及定义基础样式【任务5-1】列表标记☞点击查看本小节知识架构【任务5-2】【任务5-3】【任务5-4】目录CSS控制列表样式☞点击查看本小节知识架构超链接标记目录制作banner和精品展示模块制作潮流前沿模块制作版权信息模块【任务5-5】制作头部导航模块【任务5-6】【任务5-7】【任务5-8】目录制作banner和精品展示模块制作潮流前沿模块制作版1无序列表ul有序列表ol知识架构2

【任务5-1】列表标记定义列表dl列表的嵌套应用341无序列表ul有序列表ol知识架构2知识架构1list-style复合属性背景图像定义列表项目符号2

【任务5-2】CSS控制列表样式知识架构1list-style复合属性背景图像定义列表项知识架构1创建超链接3链接伪类控制超链接锚点链接2

【任务5-3】超链接标记知识架构1创建超链接3链接伪类控制超链接锚点链接2

【任务5-1】列表标记下面将对这三种列表进行详细地讲解。为了便于用户阅读，经常将网页信息以列表的形式呈现，为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表。【任务5-1】列表标记下面将对这

无序列表ul知识点概述无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>......</ul>基本语法格式

【任务5-1】列表标记1.无序列表ul知识点概述无序列表是网页中最常用的列表，

无序列表ul不赞成使用无序列表的type属性，一般通过CSS样式属性替代。<li>与</li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标记中输入文字的做法是不被允许的。

【任务5-1】列表标记1.无序列表ul不赞成使用无序列表的type属性，一般通

有序列表ol知识点概述有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>......</ol>基本语法格式

【任务5-1】列表标记2.有序列表ol知识点概述有序列表即为有排列顺序的列表，

定义列表dl知识点概述定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。<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知识点概述在网页设计中，定义列表常用于实现图文混排效果，其中<dt></dt>标记中插入图片，<dd></dd>标记中放入对图片解释说明的文字。

【任务5-1】列表标记3.定义列表dl知识点概述在网页设计中，定义列表常用于实列表的嵌套应用知识点概述要想在列表项中定义子列表项就需要将列表进行嵌套。

【任务5-1】列表标记4.列表的嵌套应用知识点概述要想在列表项中定义子列表项就实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系列的列表属性。下面，将针对CSS中相关的列表样式属性进行详细讲解。

【任务5-2】CSS控制列表样式实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系list-style复合属性知识点概述定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。list-style:列表项目符号列表项目符号的位置列表项目图像;基本语法格式

【任务5-2】CSS控制列表样式1.list-style复合属性知识点概述定义列表常用于单调的列表项目符号往往并不能满足网页制作的需求，这时就需要使用CSS中的背景图像属性，通过图像的url（路径）为各列表项设置更丰富的图像，使列表的样式变得更加美观。实际工作中，通常通过为<li>设置背景图像的方式实现列表项目符号的控制。

【任务5-2】CSS控制列表样式2.

背景图像定义列表项目符号单调的列表项目符号往往并不能满足网页制作的需求，这时就需要使

背景图像定义列表项目符号知识点概述由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为<li>设置背景图像的方式实现列表项目图像。

【任务5-2】CSS控制列表样式2.背景图像定义列表项目符号知识点概述由于列表样式对列表一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需要在首页相应的位置添加超链接。下面，将对超链接标记的创建及样式控制进行详细讲解。

【任务5-3】超链接标记一个网站通常由多个页面构成，如果想从首页跳转到其他页面，就需创建超链接知识点概述在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。<ahref="跳转目标"target="目标窗口的弹出方式">

文本或图像</a>基本语法格式

【任务5-3】超链接标记1.创建超链接知识点概述在HTML中创建超链接非常简单，

创建超链接对超链接标记的常用属性解释如下：href用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。target用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。

【任务5-3】超链接标记1.创建超链接对超链接标记的常用属性解释如下：href用

创建超链接知识点概述创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，这时为了不影响页面的美观，通常需要清除超链接图像的边框，使图像正常显示。具体示例代码如下：<ahref="#"><imgsrc="images/logo.gif"border="0"/></a>

【任务5-3】超链接标记1.创建超链接知识点概述创建图像超链接时，在某些浏览器中

锚点链接知识点概述浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接跳转到定位位置

【任务5-3】超链接标记2.锚点链接知识点概述浏览网站时，为了提高信息的检索速度

锚点链接使用“<ahref="#id名">链接文本</a>”创建链接文本。使用相应的id名标注跳转目标的位置。

【任务5-3】超链接标记2.锚点链接使用“<ahref="#id名">链接文本链接伪类控制超链接知识点概述在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。超链接标记<a>的伪类：

【任务5-3】超链接标记3.链接伪类控制超链接知识点概述在CSS中，通过链接伪类可以实同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。

【任务5-3】超链接标记链接伪类控制超链接3.同时使用链接的4种伪类时，通常按照a:link、a:visi网站项目“穿搭速递”首页面制作怎样制作“穿搭速递”首页呢？“穿搭速递”首页面制作网站项目“穿搭速递”首页面制作怎样制作“穿搭速递”首页呢？“

【任务5-4】布局及定义基础样式【任务5-4】布局及定拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义基础样式效果分析

【任务5-4】布局及定义基础样式建立站点切图准备工作拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义准备工作→建立站点1.创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step4

【任务5-4】布局及定义基础样式准备工作→建立站点1.创建网站根目录新建站点站点建立完成在根1.使用AdobeFireworksCS6的切片工具，导出“穿搭速递”首页面中的素材图片，存储在站点中的images文件夹中。准备工作→切图

【任务5-4】布局及定义基础样式1.使用AdobeFireworksCS6的切片工具，导效果分析