教学课件任务05-3：网站首页中的导航--二级弹出式菜单的定位.pptx

教材配套资源页完整PPT课件教学课件任务05-3：网站首页中的导航-二级弹出式菜单的定位1网页设计与开发项目05 向网站首页添加导航任务5-3 二级弹出式菜单的定位2任务5-3 二级弹出式菜单的定位 知识点 掌握元素的定位 掌握固定定位、绝对定位、相对定位的用法技能点 能够根据页面元素的位置决定使用哪种定位方式 能够熟练应用固定定位、绝对定位和相对定位3子任务5-3 二级弹出式菜单的定位当鼠标在主导航上悬停时，二级菜单弹出。二级菜单是脱离文档流的，其位置依附于一级菜单，层级上要覆盖普通流中的元素，这样就需要对弹出式菜单的定位做特殊的设置。4一、元素的定位定位普通流浮动绝对定位5二、定位属性定位方法元素的定位属性主要包括定位方法、边偏移和层叠等级。position属性用于定义元素的定位模式，其基本语法格式如下：选择器 position:属性值; position属性的常用值有四个，分别表示不同的定位模式，具体如下：ustatic：自动定位（默认定位方式）urelative：相对定位，相对于其原文档流的位置进行定位uabsolute：绝对定位，相对于其上一个已经定位的父元素进行定位ufixed：固定定位，相对于浏览器窗口进行定位6二、定位属性边偏移 通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，具体解释如下：utop：顶端偏移量，定义元素相对于其父元素上边线的距离ubottom：底部偏移量，定义元素相对于其父元素下边线的距离uleft：左侧偏移量，定义元素相对于其父元素左边线的距离uright：右侧偏移量，定义元素相对于其父元素右边线的距离7二、定位属性z-index层级属性u在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。8三、定位应用静态定位u静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。u任何元素在默认状态下都会以静态定位来确定自己的位置，当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。u静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。9三、定位应用静态定位#boxwidth: 300px;height: 300px;background: #aaa;.child01,.child02,.child03width:80px;height: 40px;border: 1px solid;background: #ff0;child01child02child0310三、定位应用相对定位u相对定位是将元素参照它自身在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。#boxwidth: 300px;height: 300px;background: #aaa;.child01,.child02,.child03width:80px;height: 40px;border: 1px solid;background: #ff0;.child02position: relative;left: 150px;top: 100px;child01child02child0311三、定位应用绝对定位u绝对定位是将元素参照最近的已经定位（绝对、固定或相对定位）的父元素进行定位。若所有父元素都没有定位，则参照body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。#boxwidth: 300px;height: 300px;background: #aaa;.child01,.child02,.child03width:80px;height: 40px;border: 1px solid;background: #ff0;.child02position: absolute;left: 150px;top: 100px;child01child02child03100px150px12三、定位应用绝对定位u绝对定位经常用于二级弹出式菜单，例如当用户将光标放置在某个热点上时，会在紧贴着该热点的左方、下方或者右方（当然也可以是上方）弹出一个菜单或者一个内容层，用户可以将光标移至该菜单或者内容层上对其进行相关操作，也可以将光标离开热点，隐藏菜单或者内容层，这就是典型的弹出式二级导航方式的应用。u例如网上商城首页顶端导航条最右侧“购物车”的下拉菜单。13三、定位应用绝对定位u网上商城首页顶端导航条最右侧“购物车”的下拉菜单。提示：如果页面中某个元素A的位置由另外一个元素B的位置决定，那么在实际应用中往往要将A设置为B的子元素，并且将B设置为绝对定位，A也要设置定位，没有特殊要求可以设置为相对定位，因为相对定位可以占据A的原有位置。14三、定位应用绝对定位u部分代码参照如下。 购物车您的购物车还是空的#shopcarbackground: #666;float: right;width: 40%;text-align: center;position: relative; #shopcar divwidth: 120px;height: 40px;background: #eee;position: absolute;top:30px;left: -30px;line-height: 40px;display: none;#shopcar a:hover+divdisplay: block;15三、定位应用绝对定位u绝对定位元素还有一个重要的应用就是设置元素在父级盒子中的居中显示。u通过设置绝对定位元素的相对偏移量可以实现元素居中显示的效果，具体方法如下：设置水平居中-绝对定位，left:50%；margin-left：宽度值的一半的负数形式。设置垂直居中-绝对定位，top:50%；margin-top：高度值的一半的负数形式。16三、定位应用绝对定位.b_boxwidth: 300px;height: 300px;border: 1px solid;margin: 0 auto;position: relative;.s_boxwidth: 200px;height: 200px;background: red;position: absolute;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;【例5-3-5】使用绝对定位实现元素垂直、水平居中显示。17三、定位应用固定定位u固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。u当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。u当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。u例如：网页上不跟随页面滚动的广告栏区域。.servwidth: 80px;height: 300px;background: #888;position: fixed;right: 5%;bottom: 10%;18实训任务11.完成网上商城页面中左侧导航栏和banner的位置排版，其中左侧导航始终在banner的上方，背景色有一定的透明度。提示：绝对定位常用于两个元素有重叠的情况。如果元素A覆盖在元素B上方，可以考虑将其中一个元素A设置为绝对定位，以B为参照物进行偏移，同时设置z-index改变两个元素的上下层级关系。19实训任务22.完成网上商城首页顶端导航条最右侧“购物车”的下拉菜单。当鼠标覆盖到导航块的时候，出现二级菜单盒子。二级菜单的位置由一级菜单决定。20实训任务33.完成固定在页面顶端的导航条。提示：将顶端导航设置为固定定位的时候，会脱离文档流，导致下面的盒子从页面顶端开始排列，被顶端导航条覆盖一部分。可以调整下面盒子的margin-top值或者padding-top值。21本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 22