Web前端基础案例 10

任务5制作学院网站导航条Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）导航条是网页的重要组成元素，导航条可以将网站的信息分类处理，帮助浏览者快速查找所需信息。本任务使用HTML的无序列表标记构建导航条的结构，使用CSS

完成导航条样式设计，实现带有下拉菜单的学院网站导航条。通过本任务的实现，掌握导航条的构建及导航条样式设置等。5.1任务描述创建带有下拉菜单的学院网站导航条，浏览效果如图所示。（1）导航条的宽度为100%，高度为42px。（2）导航条的背景颜色为蓝色RGB(28,75,169)。（3）每个导航项的宽度为120px，高度为42px，文字水平居中。（4）每个导航项为超链接，文字采用微软雅黑体，文字大小为14px，文字颜色为白色，无下划线。（5）鼠标指针悬停到主菜单项上时，显示下拉菜单。创建带有下拉菜单的学院网站导航条，要求如下。5.1任务描述5.2知识准备5.2.1无序列表样式设置5.2.2超链接样式设置5.2.3元素的类型与转换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。（4）list-style属性：综合设置列表样式，可以代替上面3个属性。使用list-style属性综合设置列表项的样式，格式如下。无序列表样式设置5.2.1无序列表样式设置list-style:列表项目符号列表项目符号的位置列表项目图像;例5-1：在网页上创建无序列表，并设置列表样式

example01.html无序列表样式设置5.2.1无序列表样式设置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样式规则;}：按下鼠标左键后不松开时超链接的状态超链接样式设置5.2.2超链接样式设置通常在实际应用时，只使用a:link和a:visited来定义未访问和访问后的样式，而且为a:link和a:visited定义相同的样式；使用a:hover定义鼠标指针悬停时超链接的样式。有时干脆只定义a和a:hover的样式。超链接样式设置5.2.2超链接样式设置例5-2：设置超链接文字的样式example02.html5.2.3元素的类型与转换HTML提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加清晰、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。块元素和行内元素还能根据实际需求进行类型转换。块元素5.2.3元素的类型与转换块元素（BlockElement）在页面中以区域块的形式出现，其特点是：每个块元素通常都会占据一整行或多行，可以对其设置宽度、高度、对齐方式等属性，常用于网页布局和搭建网页结构。常见的块元素有h1～h6、p、ul、ol、li、div、header、nav、article、aside、section、footer等行内元素行内元素（InlineElement）也称为内联元素或内嵌元素，其特点是：不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占据独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，常用于控制页面中特殊文本的样式。常见的行内元素有a、span、strong、ins、em、del等，其中a和span元素是典型的行内元素。5.2.3元素的类型与转换元素的转换网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行内元素的某些特性，如不独占一行，则可以使用display属性转换元素的类型。格式如下。display:inline|block|inline-block|none;5.2.3元素的类型与转换元素的转换display属性常用的属性值及含义如下。inline：行内元素，该值是行内元素的默认属性值。block：块元素，该值是块元素的默认属性值。inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属性，但是该元素不会独占一行。none：元素被隐藏，不显示。5.2.3元素的类型与转换元素的转换5.2.3元素的类型与转换例5-3：制作水平导航条

example03.html元素的转换5.2.3元素的类型与转换例5-3：制作水平导航条

example03.html5.3任务实现5.3任务实现5.3.1搭建学院网站导航条结构5.3.2定义学院网站导航条CSS样式5.3.1搭建学院网站导航条结构该导航条由10个主菜单项及其子菜单项构成。主菜单项及