《网页前端技术》CSS语言任务三.ppt

CSS 任务三 学会CSS的高级应用技巧 案例分解 案例资讯 用CSS实现层的排版 用CSS的滤镜实现各种特效 定位 区块 特效 在这个任务我们主要学习CSS高级应用，定位，特效。 教学重点：CSS的定位 CSS的区块的使用 CSS的层的使用 教学难点： CSS的特殊的滤镜的使用 案例资讯 案例一 用CSS实现层的排版 本案例主要是学习CSS怎样实现层的排版。 学习关于CSS排版的一些相关概念及使用方法。 案例一 用CSS实现层的排版 案例资讯 在学习CSS实现层的排版之前，我们先来学习一下关于CSS排版的一些相关概念及使用方法。 一、定位 定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。 1、基本定位 常用定位属性： ①、position 检索对象的定位方式 语法:position : static | absolute | relative static : 静态（默认）无特殊定位，对象遵循HTML定位规则 absolute : 绝对，将对象从文档流中拖出，使用width，height，left，right，top，bottom等属性与margin、padding、border进行绝对定位，绝对定位的元素可以有边界，但这些边界不压缩。而其层叠通过z-index属性定义。 relative : 相对，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置 fixed : 悬浮，使元素固定在屏幕的某个位置，不随滚动条的滚动而滚动 inherit : 这个值从其上级元素继承得到。 ②、z-index 检索或设置对象的层叠顺序 语法: z-index:auto auto: 遵从父对象的定位 ③、在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的相对定位。而真正意义上的位移是通过top,right,bottom,left针对一个相对定位的元素所产生的。 2、高级定位 二、区块 包含块（containing block）是格式编排发生的关联场景，例如，一个加粗的元素的包含块可以是该元素所出现的段落，如下图所示： 1、区块基本信息 建立包含块的规则如下： (1)根元素”的包含块（也叫初始包含块）由用户代理生成，在HTML中，根元素是HTML元素，尽管有的浏览器会不正确地使用body元素。 (2)对于那些未绝对定位的非根元素来说，元素的包含块设置为最近的块级祖先元素的内容区边沿。 (3)对那些使用绝对（absolute）作为定位（postition）的非根元素，包含块设为最近的定位（postition）不是静止（static）的祖先元素（任何类型）。有以下几种情况： 　　 a.如果祖先元素是块级（block）元素，包含块设为祖先元素的填充（padding）边沿，也就是被边框（border）约束的区域 b.如果祖先元素是内联（inline）元素，包含块设为祖先元素的内容边沿。 因此，绝对定位的元素往往以浏览器可视区域的左上为坐标原点来进行定位了。 2、区块边缘信息 区块宽度：区块宽度是整个包含边缘在内的宽度，而元素宽度指的只是内容元素的宽度。 区块性质指令： margin-top：设定上边缘宽度； margin-right：设定右边缘宽度； margin-bottom：设定下边缘宽度； margin-left：设定左边缘宽度。 记事本中代码如下： 案例步骤 html head style type=text/css img.x{ position:absolute; left:0px; top:0px; z-index:-1} /style /head body h1 定位/h1 img class=x src=girl.jpg width=100 height=180 p这个是简单的定位例子。/p /body /html 显示效果如图6所示： 案例资讯 案例二