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

* * * * 项目5 “穿搭速递”首页面制作 · 超链接标记 · CSS伪类 · 列表标记 · 列表样式 HTML 学习目标 掌握列表标记，能够使用列表对网页中的信息进行简单的排序。 1 掌握 了解 熟悉 掌握超链接标记，能够使用超链接实现页面间的跳转。 2 了解css伪类，能够运用链接伪类控制超链接。 4 熟悉列表样式的控制，能够运用CSS定义丰富的列表项目符号。 3 ? 目录 CSS控制列表样式 ?点击查看本小节知识架构 超链接标记 ?点击查看本小节知识架构 布局及定义基础样式 【任务5-1】 列表标记 ?点击查看本小节知识架构 【任务5-2】 【任务5-3】 【任务5-4】 ? 目录 制作banner和精品展示模块 制作潮流前沿模块 制作版权信息模块 【任务5-5】 制作头部导航模块 【任务5-6】 【任务5-7】 【任务5-8】 1 无序列表ul 有序列表ol ? 知识架构 2 【任务5-1】列表标记 定义列表dl 列表的嵌套应用 3 4 ? 知识架构 1 list-style复合属性 背景图像定义列表项目符号 2 【任务5-2】CSS控制列表样式 ? 知识架构 1 创建超链接 3 链接伪类控制超链接 锚点链接 2 【任务5-3】超链接标记 【任务5-1】列表标记 下面将对这三种列表进行详细地讲解。 为了便于用户阅读，经常将网页信息以列表的形式呈现，为了满足网页排版的需求，HTML语言提供了3种常用的列表，分别为无序列表、有序列表和定义列表。 无序列表ul 知识点概述 无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。 ul li列表项1/li li列表项2/li li列表项3/li ...... /ul 基本语法格式 【任务5-1】列表标记 1. 无序列表ul 不赞成使用无序列表的type属性，一般通过CSS样式属性替代。 li与/li之间相当于一个容器，可以容纳所有的元素。但是ul/ul中只能嵌套li/li，直接在ul/ul标记中输入文字的做法是不被允许的。 【任务5-1】列表标记 1. 有序列表ol 知识点概述 有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。 ol li列表项1/li li列表项2/li li列表项3/li ...... /ol 基本语法格式 【任务5-1】列表标记 2. 定义列表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 知识点概述 在网页设计中，定义列表常用于实现图文混排效果，其中dt/dt标记中插入图片，dd/dd标记中放入对图片解释说明的文字。 【任务5-1】列表标记 3. 列表的嵌套应用 知识点概述 要想在列表项中定义子列表项就需要将列表进行嵌套。 【任务5-1】列表标记 4. 实际工作中常常需要对列表的样式进行美化，为此CSS提供了一系列的列表属性。 下面，将针对CSS中相关的列表样式属性进行详细讲解。 【任务5-2】CSS控制列表样式 list-style复合属性 知识点概述 定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。 list-style:列表项目符号 列表项目符号的位置 列表项目图像; 基本语法格式 【任务5-2】CSS控制列表样式 1. 单调的列表项目符号往往并不能满足网页制作的需求，这时就需要使用CSS中的背景图像属性，通过图像的url（路径）为各列表项设置更丰富的图像，使列表的样式变得更加美观。 实际工作中，通常通过为li设置背景图像的方式实现列表项目符号的控制。 【任务5-2】CSS控制列表样式 2. 背景图像定义列表项目符号 背景图像定义列表项目符号 知识点概述 由于列表样式对列表