版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务12元素的定位第五单元盒子模型任务12元素的定位第五单元盒子模型1学习目标固定定位（fixed）静态定位（static）相对定位（relative）绝对定位（absolute）掌握学习目标固定定位（fixed）静态定位（static）相对定2不同定位模式的应用场合了解:学习目标不同定位模式的应用场合了解:学习目标3任务目标实战演练——制作旅游景点推荐网banner强化训练——制作个人博客首页任务目标实战演练——制作旅游景点推荐网banner强化训练—4知识准备1.元素的定位元素的定位：可以精确定义一个元素的准确位置（1）定位模式：position属性static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位（2）边偏移：left：左侧偏移量right：右侧偏移量top：顶端偏移量bottom：底部偏移量知识准备1.元素的定位元素的定位：可以精确定义一个元素的准5知识准备2.静态定位（static）静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。知识准备2.静态定位（static）静态定位（static6知识准备3.相对定位（relative）相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”，该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。知识准备3.相对定位（relative）相对定位（rela7知识准备示例：元素的相对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:relative;/*相对定位*/left:150px;/*距离原位置左边线150px*/top:100px;/*距离原位置顶部边线100px*/}</style>知识准备示例：元素的相对定位<styletype="tex8知识准备4.绝对定位（absolute）绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当元素设置为绝对定位“position:absolute;”，该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。知识准备4.绝对定位（absolute）绝对定位（abs9知识准备示例：元素的绝对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*绝对定位*/left:150px;/*距离父元素左边线150px*/top:100px;/*距离父元素顶部边线100px*/}</style>知识准备示例：元素的绝对定位<styletype="tex10知识准备示例：“子绝父相”原则<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{
position:relative;margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}
<body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*绝对定位*/left:150px;/*距离父元素左边线150px*/top:100px;/*距离父元素顶部边线100px*/}</style>知识准备示例：“子绝父相”原则<styletype="te11知识准备5.固定定位（fixed）固定定位（fixed）：相对于浏览器窗口进行定位。元素设置为固定定位之后，就会脱离原来的文档流进行定位，原有的位置将被其他元素占据。无论浏览器窗口大小如何改变，浏览器滚动条如何拖动，固定定位的元素都将显示在浏览器的固定位置。知识准备5.固定定位（fixed）固定定位（fixed）：12知识准备6.z-index层叠等级属性z-index层叠等级属性：定义叠加元素的堆叠顺序，其值可以取正整数、0、负整数，默认值为0，取值越大，定位元素的位置就越靠上。知识准备6.z-index层叠等级属性z-index层叠等13实战演练案例描述：设计并制作旅游景点推荐网banner，网页效果如下图1所示。当鼠标移动到每个导航选项上时，超链接的样式将会发生变化，效果如图2所示。制作旅游景点推荐网banner图1图2网页布局图实战演练案例描述：设计并制作旅游景点推荐网b14强化训练案例描述：设计并制作个人博客首页，网页效果如下。制作个人博客首页强化训练案例描述：设计并制作个人博客首页，网页效果如下。制作15任务小结01静态定位static02相对定位relative03绝对定位absolute04固定定位fixed任务小结01静态定位static02相对定位relative16课后实训设计新闻列表页面，效果如图所示。课后实训设计新闻列表页面，效果如图所示。17谢谢观看谢谢观看18任务12元素的定位第五单元盒子模型任务12元素的定位第五单元盒子模型19学习目标固定定位（fixed）静态定位（static）相对定位（relative）绝对定位（absolute）掌握学习目标固定定位（fixed）静态定位（static）相对定20不同定位模式的应用场合了解:学习目标不同定位模式的应用场合了解:学习目标21任务目标实战演练——制作旅游景点推荐网banner强化训练——制作个人博客首页任务目标实战演练——制作旅游景点推荐网banner强化训练—22知识准备1.元素的定位元素的定位：可以精确定义一个元素的准确位置（1）定位模式：position属性static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位（2）边偏移：left：左侧偏移量right：右侧偏移量top：顶端偏移量bottom：底部偏移量知识准备1.元素的定位元素的定位：可以精确定义一个元素的准23知识准备2.静态定位（static）静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。不能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。知识准备2.静态定位（static）静态定位（static24知识准备3.相对定位（relative）相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”，该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。知识准备3.相对定位（relative）相对定位（rela25知识准备示例：元素的相对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:relative;/*相对定位*/left:150px;/*距离原位置左边线150px*/top:100px;/*距离原位置顶部边线100px*/}</style>知识准备示例：元素的相对定位<styletype="tex26知识准备4.绝对定位（absolute）绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当元素设置为绝对定位“position:absolute;”，该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。知识准备4.绝对定位（absolute）绝对定位（abs27知识准备示例：元素的绝对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><divclass="box3">box3</div></div></body>.box2{position:absolute;/*绝对定位*/left:150px;/*距离父元素左边线150px*/top:100px;/*距离父元素顶部边线100px*/}</style>知识准备示例：元素的绝对定位<styletype="tex28知识准备示例：“子绝父相”原则<styletype="text/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{
position:relative;margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}
<body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</di
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 石料沙石运输合同书
- 商场租赁合同
- 学生实习劳动合同
- 公司场地出租合同
- 营销现场作业安全管理和反窃电技能竞赛参考练习测试题附答案
- 手房合同补充条款
- 医疗器械委托研发合同
- 金融信息数据交易合同
- 绿桐种植合同范本
- 市政市容工程合同范本
- 南通2024年江苏南通市公安局苏锡通园区分局警务辅助人员招聘12人笔试历年典型考题及考点附答案解析
- 学校科研课题管理办法
- SYT 6968-2021 油气输送管道工程水平定向钻穿越设计规范-PDF解密
- 中美贸易战浅析
- 人美版初中美术知识点汇总八年级全册
- 2024年陕西秦农农村商业银行股份有限公司招聘笔试参考题库含答案解析
- 工地图文广告清单及报价(2家)
- 如果国宝会说话中国历史文物介绍
- 智慧审计大数据云平台整体解决方案
- 冠状动脉造影健康宣教
- 2024年北京电子科技职业学院高职单招（英语／数学／语文）笔试题库含答案解析
评论
0/150
提交评论