HTML5+CSS3 Web前端设计基础教程 第3版(第5章)浮动、定位与列表.pptx

HTML5+CSS3 Web前端设计基础教程 第3版(第5章)浮动、定位与列表.pptx

  1. 1、本文档共17页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多

第5章本章继续向读者介绍,在实际工作中使用频率非常的三类知识,即浮动、定位与列表。通过本章的学习,读者基本能够达到创建并控制较为复杂的网页版面。浮动、定位与列表

5.1浮动与清除浮动5.1.1浮动(float)1.向左浮动或向右浮动“float:left;”即是向左浮动,“float:right;”即是向右浮动。当某个元素具有向左(右)浮动的属性时,该元素就会生成一个块级框,然后脱离当前文档流向左(右)移动,直到碰到左(右)边缘。5.1浮动与清除浮动

5.1浮动与清除浮动此处由于div是块级元素,在初始状态下,多个div容器会纵向排列,并且将父级容器wrap的高度撑开box-1脱离文本流后,向右移动,碰到父级元素的边框,便停了下来。由于box-1移动,box-2便占据box-1的位置由于“box-2”不再处于文档流中,所以它不占据空间,实际上覆盖了“box-3”,致使“box-3”从视图中消失子元素全部脱离文档流进行浮动,致使父级容器wrap没有内容将其撑开图5-1各容器初始状态图5-2“box-1”浮动效果图5-3“box-2”浮动效果图5-4三个容器均向左浮动效果

5.1浮动与清除浮动2.浮动时由于容器空间不够造成的错位图5-5父级容器宽度不够的情况图5-6浮动的容器相互拥挤的情况

5.1浮动与清除浮动5.1.2清除浮动的三种方法1.方法一:额外增加应用“clear:both;”规则的空容器在浮动元素后额外增加一个空容器,比如“divclass=clear/div”,然后在CSS中赋予.clear{clear:both;}属性即可清理浮动。2.方法二:使用“overflow:hidden;”规则清除浮动向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动,在添加overflow属性后,浮动的容器又回到了容器层,把容器高度撑起,达到了清理浮动的效果。3.方法三:使用:after伪元素清除浮动:after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时,首先给浮动的容器添加一个名为“clearfix”的Class,然后给这个Class添加一个:after伪元素实现在容器末尾添加一个看不见的容器以清理浮动。

5.2CSS定位CSS有关定位的属性包括position、z-index(层叠顺序)、top、left、right、bottom和clip。表5-1position属性的取值及其含义取值含义staticposition属性的默认值,无特殊定位fixed固定,元素框的表现类似于将position设置为absolute,元素被固定在屏幕的某个位置,不随滚动条滚动relative相对,元素虽然偏移某个距离,但仍然占据原来的空间absolute绝对,元素在文档中的位置会被删除,定位后元素生成一个块级元素

5.2.1静态定位和固定定位1.静态定位(static)2.固定定位(fixed)图5-10鼠标为滚动时左侧导航固定图5-11页面滚动后左侧导航仍然固定5.2CSS定位

5.2.2相对和绝对定位1.相对定位(relative)图5-12没有添加相对定位样式的初始预览效果图5-13“content”容器添加相对定位样式的预览效果5.2CSS定位

2.绝对定位(absolute)3.层叠(z-index)5.2CSS定位图5-14“box-1”容器添加绝对定位样式的预览效果图5-15“box-1”容器添加z-index样式的预览效果

5.2.3相对于某一容器的绝对定位5.2CSS定位本例中通过设置父级容器相对定位,子级容器绝对定位,实现了“特卖图标放置在左上角的效果”图5-17“相对于某一容器的绝对定位”预览效果

5.3.1有关列表的CSS样式5.3列表在CSS样式中,主要是通过list-style-image属性、list-style-position属性和list-style-type属性这3个属性改变列表修饰符的类型。表5-2有关列表的CSS样式属性属性说明list-style复合属性,用于把所有用于列表的属性设置于一个声明中。list-style-image将图象设置为列表项标志。list-style-pos

文档评论(0)

balala11 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档