第7章 运用浮动和定位布局网页（新）.pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 7.4 【案例25】违停查询 随着城市化进程的推进以及人民生活水平的提高，近几年汽车产业实现了快速发展。但是，汽车在方便我们生活的同时也带来了很多问题，如交通拥堵、违章停车等。本节将运用CSS中常用的定位属性来制作一个“违停查询”界面 7.4 【案例25】违停查询 违停查询效果图 案例效果图 7.4 【案例25】违停查询 知识引入 违停查询案例知识 7.4 【案例25】违停查询 1、认识定位属性 浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。 7.4 【案例25】违停查询 1、认识定位属性 什么是定位？ 7.4 【案例25】违停查询 1、认识定位属性 在CSS中，通过CSS定位（CSS position）可以实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。 7.4 【案例25】违停查询 1、认识定位属性 选择器{position:属性值；} position属性用于定义元素的定位模式，其基本语法格式如下： position属性的常用值有四个，具体如下表所示。 值 描述 static 自动定位（默认定位方式） relative 相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位 定位模式 7.4 【案例25】违停查询 1、认识定位属性 边偏移 通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如下表所示。 边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 right 右侧偏移量，定义元素相对于其父元素右边线的距离 7.4 【案例25】违停查询 2、定位类型 静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。 7.4 【案例25】违停查询 2、定位类型 相对定位是将元素相对于它在标准文档流中的位置进行定位。 定位前 定位后 7.4 【案例25】违停查询 2、定位类型 距离左边150px 距离上图100px 在文档流中的位置仍然保留着 7.4 【案例25】违停查询 2、定位类型 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。 定位前 定位后 7.4 【案例25】违停查询 2、定位类型 距离左边150px 距离顶部100px 在文档流中的位置没被保存 1、如果仅对标签设置绝对定位，不设置边偏移，则标签的位置不变，但该标签不再占用标准文档流中的空间，会与上移的后续标签重叠。 2、定义多个边偏移属性时，如果left和right参数值冲突，以left参数值为准；如果top和bottom参数值冲突，以top参数值为准。 7.4 【案例25】违停查询 2、定位类型 固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。 7.4 【案例25】违停查询 3、z-index层叠等级属性 当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如右图所示。 定位导致重叠 z-index可以调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0。z-index的默认值是0。 解决重叠问题 7.4 【案例25】违停查询 案例实现 效果图 7.4 【案例26】网页布局 在网页设计中，如果按照从上到下的默认方式进行排版，网页版面看起来会显得单调、混乱。这时就可以对页面进行布局，将各部分模块有序排列，使网页的排版变得丰富、美观。本节将结合给出的素材，运用浮动和定位的相关知识完成一个三列布局的网页。 7.4 【案例26】网页布局 网页布局效果图 案例效果图 7.4 【案例26】网页布