《Web前端开发项目教程》网站首页中的导航-二级弹出式菜单的定位_第1页
《Web前端开发项目教程》网站首页中的导航-二级弹出式菜单的定位_第2页
《Web前端开发项目教程》网站首页中的导航-二级弹出式菜单的定位_第3页
《Web前端开发项目教程》网站首页中的导航-二级弹出式菜单的定位_第4页
《Web前端开发项目教程》网站首页中的导航-二级弹出式菜单的定位_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目05向网站首页添加导航任务5-3二级弹出式菜单的定位任务5-3二级弹出式菜单的定位

知识点掌握元素的定位掌握固定定位、绝对定位、相对定位的用法技能点能够根据页面元素的位置决定使用哪种定位方式能够熟练应用固定定位、绝对定位和相对定位子任务5-3二级弹出式菜单的定位当鼠标在主导航上悬停时，二级菜单弹出。二级菜单是脱离文档流的，其位置依附于一级菜单，层级上要覆盖普通流中的元素，这样就需要对弹出式菜单的定位做特殊的设置。一、元素的定位定位普通流浮动绝对定位二、定位属性——定位方法元素的定位属性主要包括定位方法、边偏移和层叠等级。position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}position属性的常用值有四个，分别表示不同的定位模式，具体如下：static：自动定位（默认定位方式）relative：相对定位，相对于其原文档流的位置进行定位absolute：绝对定位，相对于其上一个已经定位的父元素进行定位fixed：固定定位，相对于浏览器窗口进行定位二、定位属性——边偏移

通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，具体解释如下：top：顶端偏移量，定义元素相对于其父元素上边线的距离bottom：底部偏移量，定义元素相对于其父元素下边线的距离left：左侧偏移量，定义元素相对于其父元素左边线的距离right：右侧偏移量，定义元素相对于其父元素右边线的距离二、定位属性——z-index层级属性在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。三、定位应用——静态定位静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。三、定位应用——静态定位<styletype="text/css">

#box{

width:300px;

height:300px;

background:#aaa;

}

.child01,.child02,.child03{

width:80px;

height:40px;

border:1pxsolid;

background:#ff0;

}</style><body>

<divid="box">

<divclass="child01">child01</div>

<divclass="child02">child02</div>

<divclass="child03">child03</div>

</div></body>三、定位应用——相对定位相对定位是将元素参照它自身在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。<styletype="text/css"> #box{ width:300px; height:300px; background:#aaa;} .child01,.child02,.child03{ width:80px; height:40px; border:1pxsolid; background:#ff0;} .child02{

position:relative;

left:150px;

top:100px;}</style><body>

<divid="box">

<divclass="child01">child01</div>

<divclass="child02">child02</div>

<divclass="child03">child03</div>

</div></body>三、定位应用——绝对定位绝对定位是将元素参照最近的已经定位（绝对、固定或相对定位）的父元素进行定位。若所有父元素都没有定位，则参照body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。<styletype="text/css"> #box{ width:300px; height:300px; background:#aaa;} .child01,.child02,.child03{ width:80px; height:40px; border:1pxsolid; background:#ff0;} .child02{ position:absolute;

left:150px;

top:100px;}</style><body>

<divid="box">

<divclass="child01">child01</div>

<divclass="child02">child02</div>

<divclass="child03">child03</div>

</div></body>100px150px三、定位应用——绝对定位绝对定位经常用于二级弹出式菜单，例如当用户将光标放置在某个热点上时，会在紧贴着该热点的左方、下方或者右方（当然也可以是上方）弹出一个菜单或者一个内容层，用户可以将光标移至该菜单或者内容层上对其进行相关操作，也可以将光标离开热点，隐藏菜单或者内容层，这就是典型的弹出式二级导航方式的应用。例如网上商城首页顶端导航条最右侧“购物车”的下拉菜单。三、定位应用——绝对定位网上商城首页顶端导航条最右侧“购物车”的下拉菜单。提示：如果页面中某个元素A的位置由另外一个元素B的位置决定，那么在实际应用中往往要将A设置为B的子元素，并且将B设置为绝对定位，A也要设置定位，没有特殊要求可以设置为相对定位，因为相对定位可以占据A的原有位置。三、定位应用——绝对定位部分代码参照如下。<divid="shopcar"><ahref=""><imgsrc="img01/shopcar2.png"width=12>购物车</a> <div>您的购物车还是空的</div></div>#shopcar{ background:#666; float:right; width:40%; text-align:center; position:relative;}

#shopcardiv{ width:120px; height:40px; background:#eee; position:absolute; top:30px; left:-30px; line-height:40px; display:none;}#shopcara:hover+div{ display:block;}三、定位应用——绝对定位绝对定位元素还有一个重要的应用就是设置元素在父级盒子中的居中显示。通过设置绝对定位元素的相对偏移量可以实现元素居中显示的效果，具体方法如下：设置水平居中-----绝对定位，left:50%；margin-left：宽度值的一半的负数形式。设置垂直居中-----绝对定位，top:50%；margin-top：高度值的一半的负数形式。三、定位应用——绝对定位<body>

<divclass="b_box">

<divclass="s_box"></div>

</div></body><styletype="text/css"> .b_box{ width:300px; height:300px; border:1pxsolid; margin:0auto; position:relative; } .s_box{ width:200px; height:200px; background:red; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }</style>【例5-3-5】使用绝对定位实现元素垂直、水平居中显示。三、定位应用——固定定位固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。例如：网页上不跟随页面滚动的广告栏区域。.serv{ width:80px; height:300px; background:#888; position:fixed; right:5%; bottom:10%;}实训任务11.完成网上商城页面中左侧导航栏和banner的位置排版，其中左侧导航始终在banner的上方，背景色有一定的透明度。提示：绝对定位常用于两个元素有重叠的情况。如果元素A覆盖在元素B上方，可以考虑将其中一个元素A设置为绝对定位，以

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论