PPT
【文档说明】Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务12--元素的定位课件.pptx，共(18)页，7.381 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-3296.html
以下为本文档部分文字说明：
任务12元素的定位第五单元盒子模型学习目标固定定位（fixed）静态定位（static）相对定位（relative）绝对定位（absolute）掌握丌同定位模式的应用场合了解:学习目标任务目标实战演练——制作旅游景点推荐网banner强化训练——制作个人博客首页知识准备1.元素的定
位元素的定位：可以精确定义一个元素的准确位置（1）定位模式：position属性static：静态定位relative：相对定位absolute：绝对定位fixed：固定定位（2）边偏移：left：左侧偏移量rig
ht：右侧偏移量top：顶端偏移量bottom：底部偏移量知识准备2.静态定位（static）静态定位（static）：网页元素默认的定位方式，元素按照标准流进行布局。丌能通过设置边偏移属性left、right、top、bottom值来改变元素的位置。知识准备3.相
对定位（relative）相对定位（relative）：网页元素相对于其在原文档流的位置进行定位，当元素设置为相对定位“position:relative;”，该元素就会相对于其自身的默认位置进行偏移，但是它在文档流中的位置仍然保留。知识准备示例：元素的相对定位<styletype="te
xt/css">body{margin:0px;padding:0px;font-size:18px;font-weight:bold;}.father{margin:10pxauto;width:30
0px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box3{width:100px;height:50px;line-height:50px;text-alig
n:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="father"><divclass="box1">box1</div><divclass="b
ox2">box2</div><divclass="box3">box3</div></div></body>.box2{position:relative;/*相对定位*/left:150px;/*距离原位置左边线150px*/top:100px;/*距离原位置顶部边线100px*/}</
style>知识准备4.绝对定位（absolute）绝对定位（absolute）：将元素相对于距离其最近的、已经定位（相对、绝对或固定定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当元素设置为绝对定位“position:absol
ute;”，该元素就会相对于其父元素或body根元素进行偏移，脱离文档流，它在文档流中的位置将被其他元素占据。知识准备示例：元素的绝对定位<styletype="text/css">body{margin:0px;padding:0px;font-size:1
8px;font-weight:bold;}.father{margin:10pxauto;width:300px;height:300px;padding:10px;background-color:#c0c0c0;border:1pxdashed#666;}.box1,.box2,.box
3{width:100px;height:50px;line-height:50px;text-align:center;background-color:#9F6;margin:15px0px;border:1pxsolid#999;}</style><body><divclass="fat
her"><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="text/css">body{margin:0px;padding:0p
x;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:#9F
6;margin:15px0px;border:1pxsolid#999;}<body><divclass="father"><divclass="box1">box1</div><divclass="box2">box2</div><div
class="box3">box3</div></div></body>.box2{position:absolute;/*绝对定位*/left:150px;/*距离父元素左边线150px*/top:100p
x;/*距离父元素顶部边线100px*/}</style>知识准备5.固定定位（fixed）固定定位（fixed）：相对于浏览器窗口进行定位。元素设置为固定定位之后，就会脱离原来的文档流进行定位，原有的位置将被其他元素占据。无论浏览器窗口大小如何改变，
浏览器滚动条如何拖动，固定定位的元素都将显示在浏览器的固定位置。知识准备6.z-index层叠等级属性z-index层叠等级属性：定义叠加元素的堆叠顸序，其值可以取正整数、0、负整数，默认值为0，取值越大，定位元素的位置就越靠上。实战演练案例描述：设计并制作
旅游景点推荐网banner，网页效果如下图1所示。当鼠标移动到每个导航选顷上时，超链接的样式将会发生变化，效果如图2所示。制作旅游景点推荐网banner图1图2网页布局图强化训练案例描述：设计并制作个人博客首页，网页效果如下。制作个人博客首页任务小结静态定位static相对定位relativ
e绝对定位absolute固定定位fixed课后实训设计新闻列表页面，效果如图所示。谢谢观看
辽公网安备 21102102000191号
营业执照
