CSS设计彻底研究.ppt

第6课 链接与导航 横竖自由转换菜单 第7课 竖直排列的导航菜单 双竖线菜单 第7课 竖直排列的导航菜单 双斜角横线菜单 第7课 竖直排列的导航菜单 立体菜单 第7课 竖直排列的导航菜单 箭头菜单 第7课 竖直排列的导航菜单 带说明信息的菜单 第8课 水平排列的导航菜单 自适应的水平菜单 第8课 水平排列的导航菜单 自适应的斜角水平菜单 第8课 水平排列的导航菜单 应用滑动门技术的玻璃效果菜单 第8课 水平排列的导航菜单 三状态玻璃效果菜单（双层滑动门应用） 第8课 水平排列的导航菜单 不使用图像的圆角菜单 第8课 水平排列的导航菜单 会跳起的多彩菜单 第9课 下拉菜单 第1步 第9课 下拉菜单 第2步 第9课 下拉菜单 第3步 第9课 下拉菜单 第4步 第9课 下拉菜单 第5步 第9课 下拉菜单 第6步 第10课 表格也精彩 HTML结构 第10课 表格也精彩 Excel方式二维变色提示的表格 第10课 表格也精彩 三种显示模式的日历 第10课 表格也精彩 三种显示模式的日历 第10课 表格也精彩 三种显示模式的日历 第11课 高级网页元素 Tab面板 第11课 高级网页元素 折叠面板 第11课 高级网页元素 伸缩面板 第12课 圆角设计 示例 第12课 圆角设计 固定宽度圆角框 两背景图像法 第12课 圆角设计 固定宽度圆角框 带边框的固定宽度圆角框 第12课 圆角设计 固定宽度圆角框 单背景图象的带边框固定宽度圆角框 第3课 深入理解盒子模型 div标记与span标记 div：块级元素 （block） span：行内元素（inline） 第3课 深入理解盒子模型 盒子在标准流中的定位原则 实验1——行内元素之间的水平margin span.left{ margin-right:30px; background-color:#a9d6ff; } span.right{ margin-left:40px; background-color:#eeb0b0; } span 2 span 1 margin-right margin-left 第3课 深入理解盒子模型 盒子在标准流中的定位原则 实验2——块级元素之间的竖直margin body div style=margin-bottom:50px;块元素1/div div style=margin-top:30px;块元素2/div /body 块元素2 块元素1 块元素1 块元素2 margin-bottom:50px margin-top:30px 第3课 深入理解盒子模型 盒子在标准流中的定位原则 实验3——嵌套盒子之间的margin 第3课 深入理解盒子模型 body ul li第1个列表的第1个目内容/li li class=withborder第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。/li /ul ul li第2个列表的第1个项目内容/li li class=withborder第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。/li /ul /body CSS中的几何题 ul { background: #ddd; margin: 15px 15px 15px 15px; padding: 5px 5px 5px 5px; } li { color: black; background: #aaa margin: 20px 20px 20px 20px; padding: 10px 0px 10px 10px; list-style: none } li.withborder { border-style: dashed; border-width: 5px; border-color: black; margin-top:20px； } 第3课 深入理解盒子模型 CSS中的几何题 第3课 深入理解盒子模型 盒子的浮动 准备代码 第3课 深入理解盒子模型 盒子的浮动 实验1——设置第1个浮动的div 第3课 深入理解盒子模型 盒子的浮动 实验2——设置第2个浮动的div 第3课 深入理解盒子模型 盒子的浮动 实验3——设置第3个浮动的