任务5制作学院网站导航条教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务5 制作学院网站导航条 Web前端开发案例教程 HTML5+CSS3 微课版 导航条是网页的重要组成元素，导航条可以将网站的信息分类处理，帮助浏览者快速查找所需信息。本任务使用 HTML 的无序列表标记构建导航条的结构，使用 CSS 完成导航条样式设计，实现带有下拉菜单的学院网站导航条。通过本任务的实现，掌握导航条的构建及导航条样式设置等。 任务导学 任务3 制作学院网站导航条 任务5 任 务 描 述 任务效果 创建带有下拉菜单的学院网站导航条，浏览效果如图所示。 （1）导航条的宽度为 100%，高度为 42px。 （2）导航条的背景颜色为蓝色 RGB(28,75,169)。 （3）每个导航项的宽度为 120px，高度为 42px，文字水平居中。 （4）每个导航项为超链接，文字采用微软雅黑体，文字大小为 14px，文字颜色为白色，无下划线。 （5）鼠标指针悬停到主菜单项上时，显示下拉菜单。 任务效果 创建带有下拉菜单的学院网站导航条，要求如下。 知识点 无序列表样式设置 01 超链接样式设置 02 元素的类型与转换 03 任务3 制作学院网站导航条 任务5 知 识 准 备 5.2.1 无序列表样式设置 列表有无序列表、有序列表和自定义列表等，对应的标记分别是<ul>、<ol>和<dl>等。在实际应用中，无序列表是使用最频繁的列表之一，例如，本任务中的导航条就是用无序列表来构建的。 无序列表样式设置 5.2.1 无序列表样式设置 （1）list-style-type 属性：控制无序或有序列表的项目符号。例如，无序列表的取值有 disc、circle、square。 （2）list-style-position 属性：设置列表项目符号的位置，其取值有 inside 和 outside 两种。 （3）list-style-image 属性：设置列表项的项目图像，使列表的样式更加美观，其取值为图像的URL。 9 （4）list-style 属性：综合设置列表样式，可以代替上面 3 个属性。使用 list-style 属性综合设置列表项的样式，格式如下。 无序列表样式设置 5.2.1 无序列表样式设置 list-style: 列表项目符号 列表项目符号的位置 列表项目图像; 10 example01.html 无序列表样式设置 5.2.1 无序列表样式设置 11 5.2.2 超链接样式设置 超链接默认的文字颜色为蓝色且带有下划线，这种单调的样式并不好看。实际上，为了使超链接看起来更加美观，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在 CSS 中，通过超链接伪类可以实现不同的超链接状态。 超链接样式设置 5.2.2 超链接样式设置 超链接标记<a>的伪类有如下 4 种。 （1）a:link{CSS 样式规则;}：未访问时超链接的状态。 （2）a:visited{CSS 样式规则;}：访问后超链接的状态。 （3）a:hover{CSS 样式规则;}：鼠标指针悬停时超链接的状态。 （4）a:active{CSS 样式规则;}：按下鼠标左键后不松开时超链接的状态 13 超链接样式设置 5.2.2 超链接样式设置 通常在实际应用时，只使用 a:link 和 a:visited 来定义未访问和访问后的样式，而且为 a:link 和a:visited 定义相同的样式；使用 a:hover 定义鼠标指针悬停时超链接的样式。有时干脆只定义 a 和a:hover 的样式。 14 超链接样式设置 5.2.2 超链接样式设置 example02. html 15 5.2.3 元素的类型与转换 HTML 提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加清晰、合理，HTML 标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。块元素和行内元素还能根据实际需求进行类型转换。 块元素 5.2.3 元素的类型与转换 块元素（Block Element）在页面中以区域块的形式出现，其特点是：每个块元素通常都会占据一整行或多行，可以对其设置宽度、高度、对齐方式等属性，常用于网页布局和搭建网页结构。 常见的块元素有 h1～h6、p、ul、ol、li、div、header、nav、article、aside、section、footer 等 17 行内元素 行内元素（Inline Element）也称为内联元素或内嵌元素，其特点是：不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占据独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，常用于控制页面中特殊文本的样式。 常见的行内元素有 a、span、stro