CSS设计彻底研究PPT教学课件（完整版）.ppt

第13课 固定宽度局 CSS排版观念—— 1-2-1布局 第13课 固定宽度局 1-3-1布局 第13课 固定宽度局 1-((1-2)+1)-1布局 第13课 固定宽度局 1-2-1布局实现方法 第13课 固定宽度局 1-((1-2)+1)-1布局实现方法 第13课 固定宽度局 魔术布局 第14课 可变宽度布局剖析与制作 单列布局 第14课 可变宽度布局剖析与制作 两列布局 第14课 可变宽度布局剖析与制作 三列布局 第14课 可变宽度布局剖析与制作 两列等比例布局 #header,#pagefooter,#container{ margin:0 auto; width：760px; /*删除原来的固定宽度*/ width:85%; /*改为比例宽度*/ } #content{ float:right; width：500px; /*删除原来的固定宽度*/ width:66%; /*改为比例宽度*/ } #side{ float:left; width：260px; /*删除原来的固定宽度*/ width:33%; /*改为比例宽度*/ } 第14课 可变宽度布局剖析与制作 两列等比例布局 第14课 可变宽度布局剖析与制作 两列等比例布局 第14课 可变宽度布局剖析与制作 1-2-1单列变宽布局 第14课 可变宽度布局剖析与制作 1-2-1单列变宽布局——改进浮动法 #header,#pagefooter,#container{ margin:0 auto; width:85%; } #contentWrap{ margin-right:-300px; float:left; width:100%; } #content{ margin-right:300px; } #side{ float:right; width:300px; } #pagefooter{ clear:both; } 第14课 可变宽度布局剖析与制作 “1-3-1”宽度适应布局 对于“1-3-1”布局，可以产生更多的不同变化方式。 三列都按比例适应宽度 一列固定，其他两列按比例适应宽度 两列固定，其他一列适应宽度。 第14课 可变宽度布局剖析与制作 “1-3-1”宽度适应布局 第14课 可变宽度布局剖析与制作 “1-3-1”单侧列宽度固定的变宽布局 第14课 可变宽度布局剖析与制作 “1-3-1”中间列宽度固定的变宽布局 问题的核心是如何实现“（100%-300px）/2”这样一个宽度 第14课 可变宽度布局剖析与制作 “1-3-1”中间列宽度变化的变宽布局 第14课 可变宽度布局剖析与制作 “1-3-1”中列和侧列宽度固定的变宽布局 第14课 可变宽度布局剖析与制作 总结CSS布局方法与表格布局方法比起来，有如下几点最明显的优势： ? CSS使页面载入更快； CSS可以降低网站的流量费用； CSS使设计师在修改设计时更有效率，而代价更低； CSS使整个站点保持视觉的一致性； CSS使站点可以更好地被搜索引擎找到； CSS使站点对浏览者和浏览器更具亲和力； 在世界上越来越多人采用 Web 标准时，掌握CSS可以提高设计师的职场竞争实力。 第15课 CSS网页布局综合实践 第15课 CSS网页布局综合实践 第15课 CSS网页布局综合实践 第15课 CSS网页布局综合实践 第15课 CSS网页布局综合实践 第15课 CSS网页布局综合实践 拍摄素材照片 第15课 CSS网页布局综合实践 在图像软件中设计方案 第15课 CSS网页布局综合实践 整体结构分析 第15课 CSS网页布局综合实践 CSS样式设计 与编码 第15课 CSS网页布局综合实践 修改新页面方案 第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方式