第5章 为网页添加列表和超链接（新）.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * 5.3 【案例15】电商团购悬浮框 2、list-style-image属性 知识点概述 使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。 5.3 【案例15】电商团购悬浮框 3、list-style-position属性 知识点概述 在CSS中，list-style-position属性用于控制列表项目符号的位置 取值有inside和outside两种 1、列表项目符号位于列表文本以内 2、列表项目符号位于列表文本以外（默认值） 5.3 【案例15】电商团购悬浮框 4、list-style属性 知识点概述 定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。 list-style:列表项目符号 列表项目符号的位置 列表项目图像; 基本语法格式 5.3 【案例15】电商团购悬浮框 5、背景图像定义列表项目符号 知识点概述 由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为列表标签设置背景图像的方式实现列表项目图像。 background:url(images/2.png) no-repeat left center; /*为li设置背景图像*/ 5.3 【案例15】电商团购悬浮框 案例实现 效果图 5.4 【案例16】唱吧导航栏 浏览网站时，通过导航栏可以让访问者迅速找到所需要的资源区域，访客可以通过导航纵观整个网站。 本节将运用列表和超链接的相关知识制作一款“唱吧导航栏”。 5.4 【案例16】唱吧导航栏 唱吧导航栏效果图 鼠标移上歌曲分类时 唱吧导航栏默认效果 5.4 【案例16】唱吧导航栏 知识引入 唱吧导航栏案例知识 5.4 【案例16】唱吧导航栏 1、创建超链接 知识点概述 在HTML中创建超链接非常简单，只需用a/a标记环绕需要被链接的对象即可。 a href=跳转目标 target=目标窗口的弹出方式 文本或图像 /a 基本语法格式 5.4 【案例16】唱吧导航栏 对超链接标记的常用属性解释如下： href 用于指定链接目标的url地址，当为a标记应用href属性时，它就具有了超链接的功能。 target 用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。 1、创建超链接 5.4 【案例16】唱吧导航栏 2、锚点链接 知识点概述 浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接 跳转到定位位置 5.4 【案例16】唱吧导航栏 2、锚点链接 使用“a href=#id名链接文本/a”创建链接文本。 使用相应的id名标注跳转目标的位置。 创建锚点链接分为两步 5.4 【案例16】唱吧导航栏 3、链接伪类控制超链接 知识点概述 在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。 超链接标记a的伪类： 超链接标记a的伪类 含义 a:link{ CSS样式规则; } 未访问时超链接的状态 a:visited{ CSS样式规则; } 访问后超链接的状态 a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态 a: active{ CSS样式规则; } 鼠标点击不动时超链接的状态 5.4 【案例16】唱吧导航栏 3、链接伪类控制超链接 同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。 除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。 案例实现 效果图 5.4 【案例16】唱吧导航栏 * * * * * * * * * * * * * * * * ? 第五章 为网页添加列表和超链接 HTML 超链接标签 CSS伪类 列表标签 列表样式 学习目标 掌握 掌握 掌握 掌握无序、有序及定义列表的使用，可以制作常见的网页模块。 1 2 掌握超链接标签的使用，能够使用超链接定义网页元素。 掌握CSS伪类，能够使用CSS伪类实现超链接特效。 3 ? 目录 5.1 【案例13】精美电商悬浮框 5.2 【案例14】二维码名片 5.3 【案例15】电商团购悬浮框 ?点击查看本小节知识架构 ?点击查看本小节知识架构 ?点击查看本小节知识架构 5.4 【案例16】唱吧导航栏 ?点击查看本小节知识架构 ? 知识架构 5.1 【案例13】精美电