第5章列表与超链接.ppt

* * * * * * * * * * * * 2、清除超链接图像的边框 知识点概述 创建图像超链接时，在某些浏览器中，图像会自动添加边框效果，这时为了不影响页面的美观，通常需要清除超链接图像的边框，使图像正常显示。 让IT教学更简单，让IT学习更有效 5.4【案例14】唱吧导航栏 具体示例代码如下： a href=#img src=images/logo.gif border=0 //a 3、链接伪类 知识点概述 在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。 让IT教学更简单，让IT学习更有效 5.4【案例14】唱吧导航栏 超链接标记a的伪类： 超链接标记a的伪类 含义 a:link{ CSS样式规则; } 未访问时超链接的状态 a:visited{ CSS样式规则; } 访问后超链接的状态 a:hover{ CSS样式规则; } 鼠标经过、悬停时超链接的状态 a: active{ CSS样式规则; } 鼠标点击不动时超链接的状态 3、链接伪类 同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。 除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。 让IT教学更简单，让IT学习更有效 5.4【案例14】唱吧导航栏 4、锚点链接 知识点概述 浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。 让IT教学更简单，让IT学习更有效 5.4【案例14】唱吧导航栏 创建锚点链接 跳转到定位位置 4、锚点链接 使用“a href=#id名链接文本/a”创建链接文本。 使用相应的id名标注跳转目标的位置。 让IT教学更简单，让IT学习更有效 5.4【案例14】唱吧导航栏 唱吧导航栏 让IT教学更简单，让IT学习更有效 5.4【案例14】唱吧导航栏 让IT教学更简单，让IT学习更有效 ? 动手实践 学习完前面的内容，下面来动手实践一下吧： 请结合给出的素材，运用列表标记、超链接标记以及CSS控制列表与超链接的样式实现下图所示的课程介绍专栏效果。其中课程类别都是可以点击的链接，当鼠标移上时，其样式会发生变化。 扫一扫，查看答案 * * * * * * * * * * * * * * * * * * * * * * * * * 让IT教学更简单，让IT学习更有效 第5章 列表与超链接 列表标记 列表样式 超链接标记 CSS伪类 ? 学习目标 让IT教学更简单，让IT学习更有效 掌握列表标记，能够使用列表对网页中的信息进行简单的排序。 1 掌握 了解 熟悉 掌握超链接标记，能够使用超链接实现页面间的跳转。 2 了解css伪类，能够运用链接伪类控制超链接。 4 熟悉列表样式的控制，能够运用CSS定义丰富的列表项目符号。 3 ? 目录 让IT教学更简单，让IT学习更有效 【案例12】：二维码名片 5.2 ?点击查看本案例相关知识点 5.1 【案例11】：精美电商悬浮框 ?点击查看本案例相关知识点 5.3 【案例13】：电商团购悬浮框 ?点击查看本案例相关知识点 【案例14】：唱吧导航栏 5.4 ?点击查看本案例相关知识点 5.1 【案例11】知识点讲解 1 无序列表 有序列表 返回目录 ? 知识架构 让IT教学更简单，让IT学习更有效 2 5.2 【案例12】知识点讲解 返回目录 ? 知识架构 让IT教学更简单，让IT学习更有效 1 定义列表 定义列表实现图文混排 列表嵌套 2 3 5.3 【案例13】知识点讲解 返回目录 ? 知识架构 让IT教学更简单，让IT学习更有效 1 list-style复合属性 背景图像定义列表项目符号 2 5.4 【案例14】知识点讲解 返回目录 ? 知识架构 让IT教学更简单，让IT学习更有效 1 超链接标记 3 链接伪类 清除超链接图像的边框 2 锚点链接 4 让IT教学更简单，让IT学习更有效 列表与超链接 本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细地讲解。 由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。 一个网站 在制作电商网站时，通常需要使用一些精美的悬浮框对商品信息进行简单的分类。 让IT教学更简单，让IT学习更有效 5.1【案例11】精美电商悬浮框 优点一： 方便消费者搜索商品 优点二： 使网页结构变得清晰美观 本节将运用无序列表制作一款精美的“电商悬浮框”。 知识引入 精美