项目5 网页中的导航菜单

任务5网页中的导航菜单Web前端开发案例教程HTML5+CSS3微课版

一级导航菜单的设计任务5-1任务描述在Web应用中，除了布局设计外，页面导航栏的设计也是站点设计中的一个重要组成部分，网站中的页面导航栏用于让用户在浏览时有明确的方向，可以快速地链接到相关内容页面，从而节省用户查找页面的时间，提高访问效率。所以，页面设计时需要选择合适的导航菜单，从而使页面的视觉效果更加清晰，操作更加方便、快捷。好的导航菜单设计一定是既敢于在细节上创新，又不失主流体验。页面导航的形式主要包括水平导航菜单、垂直导航菜单以及下拉式导航菜单等，本任务将详细地讲解上述导航菜单的制作过程。学习目标知识目标

掌握制作水平导航菜单的方法掌握伪类的用法掌握伪类在超链接中的应用技能目标能够熟练设置超链接不同状态的样式能够熟练制作水平导航菜单和垂直导航菜单素质目标提高自主探究能力提高学生“四个意识”，增强民族自豪感知识点水平导航菜单样式设置01

垂直导航菜单样式设置02任务3网页中的导航菜单任务5-1一、

水平导航菜单样式设置横向文本导航实现思路一般为使用<div>搭建导航框架。常见的导航菜单主要分为站标和内容两部分，站标区不覆盖其他文字，可直接使用<img>标签插入网站站标。使用<ul>和<li>搭建内容部分，<ul>中使用两个<li>方式分行显示内容块，再使用若干超链接定义菜单。无序列表样式设置一、

水平导航菜单样式设置（1）list-style-type属性：控制无序或有序列表的项目符号。例如，无序列表的取值有disc、circle、square。（2）list-style-position属性：设置列表项目符号的位置，其取值有inside和outside两种。（3）list-style-image属性：设置列表项的项目图像，使列表的样式更加美观，其取值为图像的URL。（4）list-style属性：综合设置列表样式，可以代替上面3个属性。使用list-style属性综合设置列表项的样式，格式如下。无序列表样式设置一、

水平导航菜单样式设置list-style:列表项目符号列表项目符号的位置列表项目图像;一、

水平导航菜单样式设置2.Tab导航菜单当导航菜单文本内容较少时，建议使用Tab导航。这样可以强化页面视觉效果。Tab导航菜单实现思路一般为使用<div>搭建菜单容器，采用无序列表<ul>和<li>标签来实现菜单结构，<a>标签定义内容；使用float属性定义<li>标签为浮动元素，display属性结合width、height定义超链接大小。超链接样式设置一、

水平导航菜单样式设置超链接标记<a>的伪类有如下4种。（1）a:link{CSS样式规则;}：未访问时超链接的状态。（2）a:visited{CSS样式规则;}：访问后超链接的状态。（3）a:hover{CSS样式规则;}：鼠标指针悬停时超链接的状态。（4）a:active{CSS样式规则;}：按下鼠标左键后不松开时超链接的状态超链接样式设置一、

水平导航菜单样式设置通常在实际应用时，只使用a:link和a:visited来定义未访问和访问后的样式，而且为a:link和a:visited定义相同的样式；使用a:hover定义鼠标指针悬停时超链接的样式。有时干脆只定义a和a:hover的样式。二、垂直导航菜单垂直导航是网站导航的另一种重要形式，它是指将导航菜单安放于页面左右两侧并进行自上而下排列的导航形式。块元素二、垂直导航菜单块元素（BlockElement）在页面中以区域块的形式出现，其特点是：每个块元素通常都会占据一整行或多行，可以对其设置宽度、高度、对齐方式等属性，常用于网页布局和搭建网页结构。常见的块元素有h1～h6、p、ul、ol、li、div、header、nav、article、aside、section、footer等行内元素行内元素（InlineElement）也称为内联元素或内嵌元素，其特点是：不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占据独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，常用于控制页面中特殊文本的样式。常见的行内元素有a、span、strong、ins、em、del等，其中a和span元素是典型的行内元素。二、垂直导航菜单元素的转换网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行内元素的某些特性，如不独占一行，则可以使用display属性转换元素的类型。格式如下。display:inline|block|inline-block|none;二、垂直导航菜单元素的转换display属性常用的属性值及含义如下。inline：行内元素，该值是行内元素的默认属性值。block：块元素，该值是块元素的默认属性值。inline-block：行内块元素，可以对其设置宽度、高度和对齐方式等属性，但是该元素不会独占一行。none：元素被隐藏，不显示。二、垂直导航菜单任务

制作辽宁轻工职业学院网站首页水平导航页面任务实现1、启动HBuilderX打开HBuilder，默认Web项目HelloHBuilder中将index.html重命名为demo5-1.html。2、插入图片（2）将logo.png图片复制到HelloHBuilder项目中的img文件夹下。3、输入网页代码任务效果二级弹出式菜单的设计与定位任务5-2任务描述二级菜单是脱离文档流的，其位置依附于一级菜单，层级上要覆盖普通流中的元素，这样就需要对弹出式菜单的定位做特殊的设置。学习目标知识目标掌握元素的定位掌握固定定位、绝对定位、相对定位的用法技能目标能够根据页面元素的位置决定使用哪种定位方式l能够熟练应用固定定位、绝对定位和相对定位素质目标s提高自主探究能力

重塑工匠精神，增加就业信心知识点元素的定位01

定位的属性02定位的应用03一、元素的定位做网页时，如果希望元素出现在某个特定的位置，就需要使用定位属性对元素进行定位。元素的定位就是将元素放置在页面的指定位置，主要包括定位模式和边偏移两部分。1.定位模式二、

定位的属性元素的定位属性主要包括定位模式、边偏移和层叠等级。position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值;}position属性的常用值有四个，分别表示不同的定位模式，具体如下：•static：静态定位，默认定位方式•relative：相对定位，相对于其原文档流的位置进行定位•absolute：绝对定位，相对于其上一个已经定位的父元素进行定位•fixed：固定定位，相对于浏览器窗口进行定位2.边偏移二、

定位的属性通过边偏移属性top、bottom、left或right来精确定义定位元素的位置，其取值为不同单位的数值或百分比，具体解释如下：•top：顶端偏移量，定义元素相对于其父元素上边线的距离•bottom：底部偏移量，定义元素相对于其父元素下边线的距离•left：左侧偏移量，定义元素相对于其父元素左边线的距离•right：右侧偏移量，定义元素相对于其父元素右边线的距离3.z-index层级属性二、

定位的属性在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数或0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。1.静态定位三、

定位的应用静态定位是元素的默认定位方式，当position属性的取值为static时，元素将定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。2.相对定位三、

定位的应用相对定位是将元素参照它自身在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。3.绝对定位三、

定位的应用绝对定位经常用于二级弹出式菜单。例如，当用户将光标放置在某个热点上时，会在紧贴着该热点的左方、下方或者右方（当然也可以是上方）弹出一个菜单或者一个内容层，用户可以将光标移至该菜单或者内容层上对其进行相关操作，也可以将光标离开热点，隐藏菜单或者内容层。这就是典型的二级弹出式导航方式的应用。4.固定定位三、

定位的应用固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器