* * * * * * * * * * * * * * * * * * * * * * * * * 效果展示 【任务5-8】制作“版权信息”模块 08 效果展示 本章小结 列表和超链接是网页中必不可少的元素,需要读者能够熟练地运用列表与超链接组织页面元素。 制作项目时,读者要熟练掌握CSS控制列表和超链接,并注意清除列表和超链接的默认样式。 在实际工作中,读者要注意超链接伪类的几种状态,能够设置超链接在单击前、单击后和鼠标悬停时的样式。 本 章 小 结 * * * * * * * * * * * * * * * * * * * * * * * * * * * 知识储备 4.列表的嵌套应用 熟悉列表的嵌套应用的定义,使用列表时能够对子列表项进行嵌套。 学习目标 知识储备 4.列表的嵌套应用 在使用列表时,列表项中也有可能包含若干子列表项。我们要想在列表项中定义子列表项就需要将列表进行嵌套。
【任务5-2】CSS 控制列表样式 02 需求分析 定义无序列表或有序列表时,可以通过标签的属性控制列表的项目符号,但该方式不符合结构、表现分离的网页设计原则,为此CSS提供了列表样式属性,来单独控制列表项目符号,下面详细讲解CSS控制列表项目符号的方法。 知识储备 1. list-style复合属性 掌握list-style复合属性的语法格式,能够使用list-style复合属性设置列表样式。 学习目标 知识储备 1. list-style复合属性 list-style:列表项目符号 列表项目符号的位置 列表项目图像; 同盒子模型的边框等属性一样,在CSS中列表样式也是一个复合属性,可以将列表相关的样式都综合定义在一个复合属性list-style中。 【提示】 在实际网页制作过程中,为了更高效地控制列表项目符号,通常将list-style的属性值定义为none,然后通过为
设置背景图像的方式实现不同的列表项目符号。 知识储备 2. 背景图像定义列表项目符号 掌握使用背景图像定义列表项目符号的方法,能够在网页中使用背景图像定义列表项目符号。 学习目标 知识储备 2. 背景图像定义列表项目符号 列表样式对列表项目符号的控制能力不强,没有办法准确控制项目符号的位置,因此实际工作中常通过为设置背景图像的方式实现对列表项目符号的控制。 【任务5-3】超链接标签 03 需求分析 一个网站通常由多个页面构成,用户如果想从首页跳转到其他页面,就需要在首页相应的位置添加超链接。例如,当浏览淘宝网时,首先看到的是其首页,当单击导航栏中的导航项,页面会跳转到对应的子页面,这是因为导航项添加了超链接功能。下面,将对超链接标签的相关知识进行详细讲解。 知识储备 1.创建超链接 掌握创建超链接的方法,能够在网页中创建超链接。 学习目标 知识储备 1.创建超链接 在HTML中创建超链接非常简单,只需用标签嵌套需要链接的对象即可。 文本或图像 用于指定链接目标的url地址 用于指定链接页面的打开方式 知识储备 1.创建超链接 注意: 1. 暂时没有确定链接目标时,通常将标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。 2. 在网页中,不仅可以为文本创建超链接,还可以为图像、表格、音频、视频等网页元素添加超链接。 知识储备 2.锚点链接 掌握创建锚点链接的方法,能够在网页中创建锚点链接。 学习目标 知识储备 2.锚点链接 浏览网站时,为了提高信息的检索速度,常需要用到HTML语言中一种特殊的链接——锚点链接。锚点链接属于超链接的一种。通过创建锚点链接,用户能够快速定位到目标内容。 步骤1 步骤2 定义锚点 使用“链接文本”创建链接文本。 知识储备 2.锚点链接 浏览网站时,为了提高信息的检索速度,常需要用到HTML语言中一种特殊的链接——锚点链接。锚点链接属于超链接的一种。通过创建锚点链接,用户能够快速定位到目标内容。 步骤1 步骤2 链接到锚点 使用相应的id名标注跳转目标的位置。 知识储备 3.链接伪类控制超链接 掌握链接伪类控制超链接的方法,能够为链接指定不同的状态。 学习目标 知识储备 3.链接伪类控制超链接 在CSS中,通过链接伪类可以实现不同的链接状态