HTML5+CSS3网页设计基础-第八章-链接与导航.pptx

1、HTML5+CSS3网页设计基础第8章 链接与导航第1页第第8章章 链接与导航链接与导航本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础第8章 链接与导航第2页本章概述本章概述l网页中链接、列表与菜单随处可见，本章将讲解网页中链接、列表与菜单随处可见，本章将讲解使用使用CSS设置链接与导航菜单的方法设置链接与导航菜单的方法。HTML5+CSS3网页设计基础第8章 链接与导航第3页本章的学习目标本章的学习目标l理解链接的四种状态，能够根据它们所处的状态理解链接的四种状态，能够根据它们所处的状态来设置它们的样式。来设置它们的样式。l掌握文字链接样式的设置，能够制作不同区域的掌握文字

2、链接样式的设置，能够制作不同区域的链接效果。链接效果。l掌握图像链接样式的设置。掌握图像链接样式的设置。l掌握纵向导航菜单设计，能够制作网站的产品列掌握纵向导航菜单设计，能够制作网站的产品列表。表。l掌握使用掌握使用CSS设置横向导航菜单的常用方法。设置横向导航菜单的常用方法。HTML5+CSS3网页设计基础第8章 链接与导航第4页主要内容主要内容8.1 链接链接样式样式8.2 纵向纵向导航菜单设计导航菜单设计8.3 横向横向导航菜单导航菜单设计设计8.4 实实训训8.5 本章小结本章小结 HTML5+CSS3网页设计基础第8章 链接与导航第5页8.1 链接样式链接样式本节主要内容：本节主要内

3、容：l案例分析案例分析l设置文字链接设置文字链接样式样式l设置图像链接设置图像链接样式样式l案例制作案例制作HTML5+CSS3网页设计基础第8章 链接与导航第6页8.1.1 案例案例分析分析l【案例展示】使用【案例展示】使用CSS设置链接样式的基本知识制作产品设置链接样式的基本知识制作产品中心产品链接局部中心产品链接局部页面页面。l【知识要点】掌握【知识要点】掌握使用使用CSS设置链接样式的常用方法设置链接样式的常用方法。l【学习目标】超【学习目标】超链接的链接的4种状态及设置顺序种状态及设置顺序。l参考代码：参考代码：8-1.htmlHTML5+CSS3网页设计基础第8章 链接与导航8.1

4、.2 设置设置文字链接样式文字链接样式l伪类中通过伪类中通过:link、:Visited、:hover和和:active来控制链接来控制链接内容访问前、访问后、鼠标悬停时以及用户激活时的样式内容访问前、访问后、鼠标悬停时以及用户激活时的样式。需要要说明的是，这。需要要说明的是，这4种状态的顺序不能颠倒，否则可种状态的顺序不能颠倒，否则可能会导致伪类样式不能实现。能会导致伪类样式不能实现。l参考示例：参考示例：8-1-1.html，8-1-2.html第7页HTML5+CSS3网页设计基础第8章 链接与导航第8页8.1.3 设置设置图像链接样式图像链接样式l网页设计中对文字链接的修饰不仅限于增加

5、边框、修改背网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片对文字链接进行进一景颜色等方式，还可以利用背景图片对文字链接进行进一步美化。步美化。l参考示例：参考示例：8-1-3.htmlHTML5+CSS3网页设计基础第8章 链接与导航8.1.4 案例制作案例制作l制作完成演示案例制作完成演示案例:产品产品中心页面的产品链接中心页面的产品链接。l参考代码参考代码 8-1.html第9页HTML5+CSS3网页设计基础第8章 链接与导航第10页8.2 纵向纵向导航菜单导航菜单设计设计 本节主要内容：本节主要内容：l案例分析案例分析l纵向纵向导航导航菜单菜单l案例

6、制作案例制作HTML5+CSS3网页设计基础第8章 链接与导航第11页8.2.1 案例案例分析分析l【案例展示】【案例展示】使用使用CSS设置纵向导航菜单的基本知识制作设置纵向导航菜单的基本知识制作“产品中心产品中心”页面的左侧导航菜单页面的左侧导航菜单。l【知识要点】【知识要点】普通的链接导航菜单、纵向列表导航菜单普通的链接导航菜单、纵向列表导航菜单。l【学习目标】【学习目标】掌握使用掌握使用CSS设置纵向导航菜单的常用设置纵向导航菜单的常用方法方法l参考代码：参考代码：8-2.htmlHTML5+CSS3网页设计基础第8章 链接与导航第12页8.2.2 纵向纵向导航导航菜单菜单l普通的链接

7、导航菜单的制作比较简单，主要采用将文字链普通的链接导航菜单的制作比较简单，主要采用将文字链接从接从“行级元素行级元素”变为变为“块级元素块级元素”的方法来实现的方法来实现。l参考示例：参考示例：8-2-1.htmlHTML5+CSS3网页设计基础第8章 链接与导航8.2.3 案例制作案例制作l制作完成演示案例制作完成演示案例:产品中心页面的左侧导航产品中心页面的左侧导航。l参考代码参考代码 8-2.html第13页HTML5+CSS3网页设计基础第8章 链接与导航8.3 横向横向导航菜单导航菜单设计设计第14页本节主要内容：本节主要内容：l案例分析案例分析l网站主导航菜单的网站主导航菜单的设计

8、设计l案例制作案例制作HTML5+CSS3网页设计基础第8章 链接与导航8.3.1 案例案例分析分析l【案例展示】【案例展示】使用使用CSS设置横向导航菜单的基本知识制作设置横向导航菜单的基本知识制作产品列表中页码导航列表产品列表中页码导航列表。l【知识要点】【知识要点】导航菜单的横竖转换、横向列表导航菜单导航菜单的横竖转换、横向列表导航菜单。l【学习目标】【学习目标】掌握使用掌握使用CSS设置横向导航菜单的常用设置横向导航菜单的常用方法方法第15页HTML5+CSS3网页设计基础第8章 链接与导航8.3.2 网站网站主导航菜单的设计主导航菜单的设计l在保持原有在保持原有HTML结构不变的情况

9、下，可以将纵向导航转结构不变的情况下，可以将纵向导航转变成横向导航，其中最重要的环节就是设置变成横向导航，其中最重要的环节就是设置标签为浮标签为浮动。动。l参考示例：参考示例：8-3-1.html第16页HTML5+CSS3网页设计基础第8章 链接与导航8.3.3 案例制作案例制作l制作完成演示案例制作完成演示案例:产品中心页面的页码导航产品中心页面的页码导航。l参考代码参考代码 8-3.html第17页HTML5+CSS3网页设计基础第8章 链接与导航8.4 实训实训l制作完成演示案例制作完成演示案例:网站产品中心页面网站产品中心页面。l参考代码参考代码 8-4.html第18页HTML5+CSS3网页设计基础第8章 链接与导航第19页8.5 本章小结本章小结 l本章全面讲述本章全面讲述了了使用使用CSS设置链接与导航菜单的方法设置链接与导航菜单的方法。l首先，首先，介绍了使用介绍了使用CSS设置文字链接样式、设置图像链接设置文字链接样式、设置图像链接样式样式。l接下来，接下来，讲解了使用讲解了使用CSS设置纵向导航菜单、使用设置纵向导航菜单、使用CSS设设置横向导航菜单置横向导航菜单。l最后，通过最后，通过使用使用CSS设置链接与导航的方法，制作出了一设置链接与导航的方法，制作出了一个常见的个常见的LED网站产品中心页面网站产品中心页面。