4.3CSS盒子模型解释.ppt

Web标准网页设计与PHP;4.4 CSS的盒子模型;CSS的盒子模型;CSS的盒子模型;CSS的盒子模型;;元素盒子大小的计算;IE quirk模式下盒子的宽度;CSS盒子模型计算题;嵌套盒子例题;边框border属性;各种边框的效果;边框的交汇效果;填充padding属性;盒子模型的特性;对盒子模型的思考;属性值的简写形式?;各种元素盒子属性的默认值;4.4.2 盒子模型的应用;用盒子美化表格;4.4.3 盒子在标准流下的定位 ;盒子的三种定位形式;标准流;标准流下的盒子排列分析;行内元素的盒子;改变行内元素的高度;display属性;block元素;inline元素;隐藏元素display: none;;需要使用display属性切换的情况;标准流下定位的应用－制作竖直导航菜单;盒子的margin叠加问题;盒子的margin在标准流中的计算;行内元素之间的水平margin;实验2——块级元素之间的竖直margin body div style=margin-bottom:50px;块元素1/div div style=margin-top:30px;块元素2/div/body ;空白边叠加;嵌套盒子之间的margin;嵌套盒子在IE和Firefox中的不同显示;4.5 背景的控制 ;CSS的背景属性;CSS的背景属性;各个背景属性的默认值;background属性的缩写;DW中的背景设置面板;背景的运用技巧;背景的运用技巧;同时运用背景颜色和背景图片;控制背景在盒子中的位置及是否平铺 ;;li元素的背景应用;;多个元素背景的叠加 ;圆角的设计;4图像可变宽度圆角栏目框 ;4图像可变宽度圆角栏目框 ;最后再设置背景色;4.5.3滑动门技术－背景的高级运用 ;1. 图像阴影;滑动门制作图片阴影原理图 ;2. 自适应宽度圆角导航条;滑动门导航条代码;背景图案的翻转－控制背景的显示区域 ;通过背景图片位置控制实现图片翻转;将滑动门技术和背景图片翻转结合的例子; CSS圆角设计;圆角的设计方法;1. 制作固定宽度的圆角框;2. 制作可变宽度圆角 ;3. 不用图片做圆角－山顶角方法;3. 不用图片做圆角－山顶角方法;4. 学习圆角制作的意义;4.6 盒子的浮动;盒子的浮动 ;float属性;1. 一个盒子浮动;总结：一个盒子浮动后的特点;2. 多个盒子浮动的特点;4.6.2 浮动的清除;4.6.2 浮动的清除;4.6.3 浮动的浏览器解释问题;3. 元素浮动但是其后面相邻元素不浮动;浮动的浏览器显示问题总结; IE 6浮动元素的双倍margin错误 ;解决IE 6双倍margin错误;4.6.4 浮动的应用举例;2 菜单的竖横转换;3. 制作栏目框标题栏;3. 网页固定宽度1-3-1布局 ;IE中的1－3－1布局示意图;Firefox中的1－3－1布局示意图;1－3－1布局的结构代码;1－3－1布局的CSS代码;解决IE 6最后一列换行问题;1-3-1布局的CSS代码改进