08CSS高级-全教程.ppt

盒子的定位;盒子的三种定位形式;标准流;标准流下的盒子排列分析;行内元素的盒子;改变行内元素的高度;display属性;block元素;inline元素;列表项元素display: list-item;隐藏元素display: none;;需要使用display属性切换的情况;标准流下定位的应用－制作竖直导航菜单;盒子的margin叠加问题;盒子的margin在标准流中的计算;行内元素之间的水平margin;块级元素之间的竖直margin （会叠加） body div style=margin-bottom:50px;块元素1/div div style=margin-top:30px;块元素2/div /body ;空白边叠加;嵌套盒子之间的margin;嵌套盒子在IE和Firefox中的不同显示;盒子的浮动;盒子的浮动 ;1. 一个盒子浮动;总结：一个盒子浮动后的特点;2. 多个盒子浮动;浮动的清除;浮动的清除; IE 6浮动元素的双倍margin错误 ; IE 6浮动元素的双倍margin错误 ;浮动的应用举例;2 菜单的竖横转换;网页的固定宽度1-3-1布局 ;IE中的1－3－1布局示意图;Firefox中的1－3－1布局示意图;1－3－1布局的结构代码;1－3－1布局的CSS代码;相对定位和绝对定位;内容提要;使用定位属性position;定位属性position的取值;偏移属性;相对定位;相对定位 ;相对定位举例;相对定位的特点;相对定位的作用;相对定位的应用 ;2 利用相对定位制作简单的阴影效果 ;相对定位制作简单的阴影效果;3 网页布局的相对定位水平居中法;绝对定位;绝对定位;绝对定位－不设置包含框;绝对定位－设置包含框;绝对定位－设置包含框;绝对定位－以包含框为基准定位;绝对定位总结;相对定位和绝对定位的比较 ;z-index属性;z-index属性;绝对定位的应用;绝对定位的应用;网页中的绝对定位元素举例;?1 制作缺角的导航条 ;导航项盒子和左上角盒子的关系;第一步：写结构代码;第二步 设置a元素的CSS;a元素的CSS代码;第三步 设置b元素的CSS样式;b元素的CSS代码;第四步 添加交互效果;2制作中英文双语菜单 ;3 制作小提示窗口 ;小提示窗口与title属性对比;关键代码;制作纯CSS的下拉菜单;第一步 写结构代码;第二步 使导航项水平排列;第三步 设置下拉菜单li ul;第四步 用CSS样式美化下拉菜单;下拉菜单制作完成;第五步 兼容IE6浏览器;添加的样式代码;5. 制作图像放大效果;??一步 写结构代码;第二步 写CSS代码;第三步 设置绝对定位和定位基准;第四步 给a的父元素li设置宽和高;5. 最终图片放大效果 ;overflow属性;Overflow属性的四种取值;Overflow扩展盒子高度; clip属性;CSS+div布局;CSS+div布局;4.9.1 分栏布局的种类;网页分栏布局的基本种类;固定宽度布局 ;固定宽度网页居中的方法 ;固定宽度分栏的实现;写总体结构代码;再写栏目结构代码;可变宽度布局 ;两列等比例布局 ;两列等比例布局;1-2-1单列变宽布局——改进浮动法;1-3-1液态布局（中间列可变）;1-3-1液态布局（中间列可变）;如果对两侧列设置背景色;解决CSS浏览器兼容问题的基本方法 ;使用兼容属性;使用CSS hack技术 ;1) 使用!important关键字;2) 在属性前添加“+”、“_”号;3) 使用子选择器和属性选择器等IE 6不支持的选择器;4)使用IE条件注释 ;条件注释符号;什么时候适合用CSS hack;HTML语言的注释符;CSS的滤镜属性简介 ;CSS的滤镜;CSS的滤镜;CSS滤镜的用法;CSS滤镜属性的分类;滤镜的应用;滤镜的应用;滤镜的应用