CSS设计彻底研究ppt课件

CSS设计彻底研究 1 第0课 CSS设计彻底研究 简介 CSS 崭新的 老技术 CSS带来的好处 CSS使页面载入更快 CSS可以降低网站的流量费用 CSS使设计师在修改设计时更有效率 而代价更低 CSS使整个站点保持视觉的一致性 CSS使站点可以更好地被搜索引擎找到 CSS使站点对浏览者和浏览器更具亲和力 在世界上越来越多人采用Web标准时 掌握CSS可以提高设计师的职场竞争实力 2 第0课 CSS设计彻底研究 简介 面向读者本书面向的读者 需要两点基本要求 1 具有一定网页制作基础的读者 希望读者已经对HTML的基本元素有所了解 2 具有钻研的精神和热情 其中第一点权重占10 第2点权重占90 源码网 3 第0课 CSS设计彻底研究 简介 授人以鱼 与 授人以渔 4 第0课 CSS设计彻底研究 简介 第1章 介绍 X HTML和CSS相关的核心基础知识 第2章 向读者展示CSS能够给网页设计带来的效果 第3章 深入讲解CSS的核心机制 盒子模型 第4章 讲解CSS布局的重点和难点 浮动和定位 第5章 介绍文字和图像的排版 第6章 介绍了链接和导航相关的设置方法 第7章 制作比较简单的竖直排列的导航菜单 第8章 制作复杂一些的水平排列的导航菜单 第9章 制作两级的下拉菜单 5 第0课 CSS设计彻底研究 简介 第10章 介绍了对表格的样式的设置方法 通过制作复杂的多模式日历 第11章 深入讲解了制作圆角框的多种方法 深入分析了不同方法的特点和使用范围 第12章 介绍了在近年出现的一些新的网页元素的制作方法 例如Tab面板 折叠面板 伸缩面板等等 第13和14章 全面地归纳和总结了不同形式布局的设计方法 并给出全面的案例 第15至17章 以CSS禅意花园的作品为例 在研究成功作品的基础上 制作了自己的CSS禅意花园作品 从而演示了对整体页面的布局方法 6 第0课 CSS设计彻底研究 简介 学习资料 CSS设计彻底研究 即将出版 精通CSS DIV网页样式与布局 7 第1章 X HTML与CSS核心基础 HTML与CSS的关系HTML与XHTMLDOCTYPE 文档类型 的含义与选择 8 第1章 X HTML与CSS核心基础 XHTML与HTML的重要区别1 在XHTML中标记名称必须小写2 在XHTML中属性名称必须小写3 在XHTML中标记必须严格严格嵌套4 在XHTML中标记必须封闭5 在XHTML中 即使是空元素的标记也必须封闭6 在XHTML中属性值用双引号括起来7 在XHTML中属性值必须使用完整形式8 在XHTML中 应该区分 内容标记 与 结构标记 9 第1章 X HTML与CSS核心基础 在HTML中引入CSS的方法行内式ThisisalineofText 内嵌式h1 color white background color blue 10 第1章 X HTML与CSS核心基础 在HTML中引入CSS的方法导入式 import mystyle css 链接式 11 第1章 X HTML与CSS核心基础 基本CSS选择器含义和作用标记选择器类别选择器ID选择器 12 第1章 X HTML与CSS核心基础 复合选择器 交集 选择器div special div special 并集 选择器div h1 first p specia 后代选择器divh1 firstspan firstLetter 13 第1章 X HTML与CSS核心基础 CSS的继承特性 13 15 htm 14 第1章 X HTML与CSS核心基础 CSS的层叠特性 16 htm 行内样式 ID样式 类别样式 标记样式这是第1行文本这是第2行文本这是第3行文本这是第4行文这是第5行文本 15 第2课 CSS禅意花园 如何查找作品 16 第2课 CSS禅意花园 郊野 两列布局像素画 三列布局百合池塘 三列布局变体郁金香 多列布局日与夜 包含圆角的设计Si6 包含倾斜的设计 17 第2课 CSS禅意花园 如何查找作品谷香 食品主题设计城市 建筑主题设计 卡通版 禅意花园 特色效果收音机 特色效果杀手风格 特色效果海底世界 特色效果博物馆 特色设计剧院效果 特色效果 18 第3课深入理解盒子模型 什么是 模型 本质特征的抽象布局的 模型 19 第3课深入理解盒子模型 什么是 模型 本质特征的抽象布局的 模型 20 第3课深入理解盒子模型 div border width 6px border color 000000 margin 20px padding 5px background color FFFFCC 21 第3课深入理解盒子模型 属性值的简写形式方法是按照规定的顺序 给出2个 3个或者4个属性值 它们的含义将有所区别 具体含义如下 如果给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 如果给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 如果给出4个属性值 依次表示上 右 下 左边框的属性 即顺时针排序 22 第3课深入理解盒子模型 属性值的简写形式border color redgreenborder width 1px2px3px border style dotteddashedsoliddouble 23 第3课深入理解盒子模型 内边距 padding outerBox width 128px height 128px padding 20px20px10px 上左右下 padding left 10px border 10pxgraydashed 24 第3课深入理解盒子模型 外边距 margin outerBox width 128px height 128px padding 20px20px10px 上左右下 padding left 10px border 10pxgraydashed body border 1pxblacksolid background cc0 25 第3课深入理解盒子模型 HTML与DOM 26 第3课深入理解盒子模型 标准文档流 27 第3课深入理解盒子模型 标记与标记div 块级元素 block span 行内元素 inline 28 第3课深入理解盒子模型 盒子在标准流中的定位原则实验1 行内元素之间的水平marginspan left margin right 30px background color a9d6ff span right margin left 40px background color eeb0b0 29 第3课深入理解盒子模型 盒子在标准流中的定位原则实验2 块级元素之间的竖直margin块元素1块元素2 30 第3课深入理解盒子模型 盒子在标准流中的定位原则实验3 嵌套盒子之间的margin 31 第3课深入理解盒子模型 第1个列表的第1个目内容第1个列表的第2个项目内容 内容更长一些 目的是演示自动折行的效果 第2个列表的第1个项目内容第2个列表的第2个项目内容 内容更长一些 目的是演示自动折行的效果 CSS中的几何题ul background ddd margin 15px15px15px15px padding 5px5px5px5px li color black background aaamargin 20px20px20px20px padding 10px0px10px10px list style none li withborder border style dashed border width 5px border color black margin top 20px 32 第3课深入理解盒子模型 CSS中的几何题 33 第3课深入理解盒子模型 盒子的浮动准备代码 34 第3课深入理解盒子模型 盒子的浮动实验1 设置第1个浮动的div 35 第3课深入理解盒子模型 盒子的浮动实验2 设置第2个浮动的div 36 第3课深入理解盒子模型 盒子的浮动实验3 设置第3个浮动的div 37 第3课深入理解盒子模型 盒子的浮动实验4 改变浮动的方向 38 第3课深入理解盒子模型 盒子的浮动实验5 再次改变浮动的方向 39 第3课深入理解盒子模型 盒子的浮动实验6 全部向左浮动 40 第3课深入理解盒子模型 盒子的浮动实验7 使用clear属性清除浮动的影响 41 第3课深入理解盒子模型 盒子的浮动实验8 扩展盒子的高度 42 第4课盒子的浮动与定位 盒子的定位广义的 定位 当提到把希望某个元素放到某个位置的时候 这个动作可以称为定位操作 可以使用任何CSS规则来实现 这就是泛指的一个网页排版中的定位操作 使用传统的表格排版时 同样存在定为的问题 狭义的 定位 在CSS中有一个非常重要的属性position 这个单词要翻译为中文 也是定位的意思 然而要使用CSS进行定位操作的手段 并不仅仅通过择个属性来实现 因此不要把把二者混淆 43 第4课盒子的浮动与定位 盒子的定位static 这是默认的属性值 也就是该盒子按照标准流 包括浮动方式 进行布局 relative 称为相对定位 使用相对定位的盒子的位置根据常以标准流的排版方式为基础 然后使盒子相对于它在原本的标准位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 absolute 绝对定位 盒子的位置以他的包含框为基准进行偏移 绝对定位的框从标准流中脱离 这意味着它们对其后的兄弟盒子的定位没有影响 其他的盒子就好形这个盒子不存在一样 fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准 进行定位 44 第4课盒子的浮动与定位 盒子的定位static 这是默认的属性值 也就是该盒子按照标准流 包括浮动方式 进行布局 45 第4课盒子的浮动与定位 盒子的定位Relative 称为相对定位 使用相对定位的盒子的位置根据常以标准流的排版方式为基础 然后使盒子相对于它在原本的标准位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 46 第4课盒子的浮动与定位 盒子的定位Absolute 绝对定位 盒子的位置以他的包含框为基准进行偏移 绝对定位的框从标准流中脱离 这意味着它们对其后的兄弟盒子的定位没有影响 其他的盒子就好形这个盒子不存在一样 47 第4课盒子的浮动与定位 盒子的定位Fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准 进行定位 48 第4课盒子的浮动与定位 盒子的display属性Box 1Box 2Box 3Box 4Box 5Box 6Box 7Box 7 49 第4课盒子的浮动与定位 盒子的display属性Box 1Box 2Box 3Box 4Box 5Box 6Box 7Box 8 50 第5课介绍文字和图像的排版 CSS文字样式准备网页设置字体文字大小行高文字颜色与背景颜色文字加粗 倾斜与大小写文字的装饰效果文字的水平对齐方式文字布局段落的垂直对齐方式 51 第5课介绍文字和图像的排版 CSS图像样式5 2 1基本设置5 2 1背景图像5 2 1标题的图像替换 52 第5课介绍文字和图像的排版 CSS图像阴影基本设置柔边阴影IE6兼容 53 第5课介绍文字和图像的排版 CSS图像阴影 54 第6课链接与导航 动态超链接a link a visited text decoration none a hover a active text decoration underline 55 第6课链接与导航 按钮式超链接 56 第6课链接与导航 浮雕背景超链接 57 第6课链接与导航 让下划线动起来 58 第6课链接与导航 简单的竖直排列菜单 59 第6课链接与导航 横竖自由转换菜单 60 第7课竖直排列的导航菜单 双竖线菜单 61 第7课竖直排列的导航菜单 双斜角横线菜单 62 第7课竖直排列的导航菜单 立体菜单 63 第7课竖直排列的导航菜单 箭头菜单 64 第7课竖直排列的导航菜单 带说明信息的菜单 65 第8课水平排列的导航菜单 自适应的水平菜单 66 第8课水平排列的导航菜单 自适应的斜角水平菜单 67 第8课水平排列的导航菜单 应用滑动门技术的玻璃效果菜单 68 第8课水平排列的导航菜单 三状态玻璃效果菜单 双层滑动门应用 69 第8课水平排列的导航菜单 不使用图像的圆角菜单 70 第8课水平排列的导航菜单 会跳起的多彩菜单 71 第9课下拉菜单 第1步 72 第9课下拉菜单 第2步 73 第9课下拉菜单 第3步 74 第9课下拉菜单 第4步 75 第9课下拉菜单 第5步 76 第9课下拉菜单 第6步 77 第10课表格也精彩 HTML结构 78 第10课表格也精彩 Excel方式二维变色提示的表格 79 第10课表格也精彩 三种显示模式的日历 80 第10课表格也精彩 三种显示模式的日历 81 第10课表格也精彩 三种显示模式的日历 82 第11课高级网页元素 Tab面板 83 第11课高级网页元素 折叠面板 84 第11课高级网页元素 伸缩面板 85 第12课圆角设计 示例 86 第12课圆角设计 固定宽度圆角框两背景图像法 87 第12课圆角设计 固定宽度圆角框带边框的固定宽度圆角框 88 第12课圆角设计 固定宽度圆角框单背景图象的带边框固定宽度圆角框 89 第12课圆角设计 不固定宽度的圆角框 90 第12课圆角设计 4图像 法 UNfixedRounded这是一个不固定宽度的圆角框 由于是宽度不固定 因此制作起来复杂一些 这个圆角框的上下随着内容增多可以自由伸展 圆角不会被破坏 此外 设置为不同的宽度 也同样适用 91 第12课圆角设计 5图像 二维滑动门经典圆角框 丹麦的设计师S renMadsen AListApart 的第165期 92 第12课圆角设计 5图像 二维滑动门经典圆角框 93 第12课圆角设计 5图像 二维滑动门经典圆角框 94 第13课固定宽度局 CSS排版观念 1 2 1布局 95 第13课固定宽度局 1 3 1布局 96 第13课固定宽度局 1 1 2 1 1布局 97 第13课固定宽度局 1 2 1布局实现方法 98 第13课固定宽度局 1 1 2 1 1布局实现方法 99 第13课固定宽度局 魔术布局 100 第14课可变宽度布局剖析与制作 单列布局 101 第14课可变宽度布局剖析与制作 两列布局 102 第14课可变宽度布局剖析与制作 三列布局 103 第14课可变宽度布局剖析与制作 两列等比例布局 header pagefooter container margin 0auto width 760px 删除原来的固定宽度 width 85 改为比例宽度 content float right width 500px 删除原来的固定宽度 width 66 改为比例宽度 side float left width 260px 删除原来的固定宽度 width 33 改为比例宽度 104 第14课可变宽度布局剖析与制作 两列等比例布局 105 第14课可变宽度布局剖析与制作 两列等比例布局 106 第14课可变宽度布局剖析与制作 1 2 1单列变宽布局 107 第14课可变宽度布局剖析与制作 1 2 1单列变宽布局 改进浮动法 header pagefooter container margin 0auto width 85 contentWrap margin right 300px float left width 100 content margin right 300px side float right width 300px pagefooter clear both 108 第14课可变宽度布局剖析与制作 1 3 1 宽度适应布局对于 1 3 1 布局 可以产生更多的不同变化方式 三列都按比例适应宽度一列固定 其他两列按比例适应宽度两列固定 其他一列适应宽度 109 第14课可变宽度布局剖析与制作 1 3 1 宽度适应布局 110 第14课可变宽度布局剖析与制作 1 3 1 单侧列宽度固定的变宽布局 111 第14课可变宽度布局剖析与制作 1 3 1 中间列宽度固定的变宽布局问题的核心是如何实现 100 300px 2 这样一个宽度 112 第14课可变宽度布局剖析与制作 1 3 1 中间列宽度变化的变宽布局 113 第14课可变宽度布局剖析与制作 1 3 1 中列和侧列宽度固定的变宽布局 114 第14课可变宽度布局剖析与制作 总结CSS布局方法与表格布局方法比起来 有如下几点最明显的优势 CSS使页面载入更快 CSS可以降低网站的流量费用 CSS使设计师在修改设计时更有效率 而代价更低 CSS使整个站点保持视觉的一致性 CSS使站点可以更好地被搜索引擎找到 CSS使站点对浏览者和浏览器更具亲和力 在世界上越来越多人采用Web标准时 掌握CSS可以提高设计师的职场竞争实力 115 第15课CSS网页布局综合实践 116 第15课CSS网页布局综合实践 117 第15课CSS网页布局综合实践 118 第15课CSS网页布局综合实践 119 第15课CSS网页布局综合实践 120 第15课CSS网页布局综合实践 拍摄素材照片 121 第15课CSS网页布局综合实践 在图像软件中设计方案 122 第15课CSS网页布局综合实践 整体结构分析 123 第15课CSS网页布局综合实践 CSS样式设计与编码 124 第15课CSS网页布局综合实践 修改新页面方案 125 126