任务5 制作学院网站导航条

任务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制作学院网站导航条任务55.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:列表项目符号列表项目符号的位置列表项目图像;example01.html无序列表样式设置5.2.1无序列表样式设置5.2.2超链接样式设置超链接默认的文字颜色为蓝色且带有下划线，这种单调的样式并不好看。实际上，为了使超链接看起来更加美观，经常需要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标指针悬停时的样式不同。在CSS中，通过超链接伪类可以实现不同的超链接状态。超链接样式设置5.2.2超链接样式设置超链接样式设置5.2.2超链接样式设置通常在实际应用时，只使用a:link和a:visited来定义未访问和访问后的样式，而且为a:link和a:visited定义相同的样式；使用a:hover定义鼠标指针悬停时超链接的样式。有时干脆只定义a和a:hover的样式。超链接样式设置5.2.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元素的类型与转换<span>标记<span>标记与<div>标记都因可作为容器标记而被广泛应用在HTML网页中。在<span>与</span>之间同样可以容纳各种HTML元素，从而形成独立的对象。div元素与span元素的区别在于，div元素是一个块元素，它包围的元素会自动换行；而span元素是一个行内元素，在它的前后不会换行。span元素没有结构上的意义，纯粹是用来应用样式的，当对一行内容中的某部分内容单独设置样式时，就可以使用span元素。5.2.3元素的类型与转换元素的转换网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行内元素的某些特性，如不独占一行，则可以使用display属性转换元素的类型。格式如下。display:inline|block|inline-block|none;5.2.3元素的类型与转换元素的转换display属性常用的属性值及含义如下。inline：行内元素，该值是行内元素的默认属性值。block：块元素，该值是块元素的默认属性值。inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属性，但是该元素不会独占一行。none：元素被隐藏，不显示。5.2.3元素的类型与转换元素的转换在项目chapter05中再新建一个网页文件，制作垂直导航条，文件名为example03.html。5.2.3元素的类型与转换元素的转换浏览网页，效果如下图所示。5.2.3元素的类型与转换任务

制作学院网站导航条任务55.3.1搭建学院网站导航条结构该导航条由10个主菜单项构成。主菜单项使用无序列表来构造，所有内容放入一个导航块中，再设置块中各元素及超链接的CSS样式。5.3.1搭建学院网站导航条结构5.3.2