CSS设计彻底研究.ppt

CSS设计彻底研究 第0课 CSS设计彻底研究 简介 CSS 崭新的 老技术 CSS带来的好处 CSS使页面载入更快 CSS可以降低网站的流量费用 CSS使设计师在修改设计时更有效率 而代价更低 CSS使整个站点保持视觉的一致性 CSS使站点可以更好地被搜索引擎找到 CSS使站点对浏览者和浏览器更具亲和力 在世界上越来越多人采用Web标准时 掌握CSS可以提高设计师的职场竞争实力 第0课 CSS设计彻底研究 简介 面向读者本书面向的读者 需要两点基本要求 1 具有一定网页制作基础的读者 希望读者已经对HTML的基本元素有所了解 2 具有钻研的精神和热情 其中第一点权重占10 第2点权重占90 源码网 第0课 CSS设计彻底研究 简介 授人以鱼 与 授人以渔 第0课 CSS设计彻底研究 简介 第1章 介绍 X HTML和CSS相关的核心基础知识 第2章 向读者展示CSS能够给网页设计带来的效果 第3章 深入讲解CSS的核心机制 盒子模型 第4章 讲解CSS布局的重点和难点 浮动和定位 第5章 介绍文字和图像的排版 第6章 介绍了链接和导航相关的设置方法 第7章 制作比较简单的竖直排列的导航菜单 第8章 制作复杂一些的水平排列的导航菜单 第9章 制作两级的下拉菜单 第0课 CSS设计彻底研究 简介 第10章 介绍了对表格的样式的设置方法 通过制作复杂的多模式日历 第11章 深入讲解了制作圆角框的多种方法 深入分析了不同方法的特点和使用范围 第12章 介绍了在近年出现的一些新的网页元素的制作方法 例如Tab面板 折叠面板 伸缩面板等等 第13和14章 全面地归纳和总结了不同形式布局的设计方法 并给出全面的案例 第15至17章 以CSS禅意花园的作品为例 在研究成功作品的基础上 制作了自己的CSS禅意花园作品 从而演示了对整体页面的布局方法 第0课 CSS设计彻底研究 简介 学习资料 CSS设计彻底研究 即将出版 精通CSS DIV网页样式与布局 第1章 X HTML与CSS核心基础 HTML与CSS的关系HTML与XHTMLDOCTYPE 文档类型 的含义与选择 第1章 X HTML与CSS核心基础 XHTML与HTML的重要区别1 在XHTML中标记名称必须小写2 在XHTML中属性名称必须小写3 在XHTML中标记必须严格严格嵌套4 在XHTML中标记必须封闭5 在XHTML中 即使是空元素的标记也必须封闭6 在XHTML中属性值用双引号括起来7 在XHTML中属性值必须使用完整形式8 在XHTML中 应该区分 内容标记 与 结构标记 第1章 X HTML与CSS核心基础 在HTML中引入CSS的方法行内式ThisisalineofText 内嵌式h1 color white background color blue 第1章 X HTML与CSS核心基础 在HTML中引入CSS的方法导入式 import mystyle css 链接式 第1章 X HTML与CSS核心基础 基本CSS选择器含义和作用标记选择器类别选择器ID选择器 第1章 X HTML与CSS核心基础 复合选择器 交集 选择器div special div special 并集 选择器div h1 first p specia 后代选择器divh1 firstspan firstLetter 第1章 X HTML与CSS核心基础 CSS的继承特性 13 15 htm 第1章 X HTML与CSS核心基础 CSS的层叠特性 16 htm 行内样式 ID样式 类别样式 标记样式这是第1行文本这是第2行文本这是第3行文本这是第4行文这是第5行文本 第2课 CSS禅意花园 如何查找作品 第2课 CSS禅意花园 郊野 两列布局像素画 三列布局百合池塘 三列布局变体郁金香 多列布局日与夜 包含圆角的设计Si6 包含倾斜的设计 第2课 CSS禅意花园 如何查找作品谷香 食品主题设计城市 建筑主题设计 卡通版 禅意花园 特色效果收音机 特色效果杀手风格 特色效果海底世界 特色效果博物馆 特色设计剧院效果 特色效果 第3课深入理解盒子模型 什么是 模型 本质特征的抽象布局的 模型 第3课深入理解盒子模型 什么是 模型 本质特征的抽象布局的 模型 第3课深入理解盒子模型 div border width 6px border color 000000 margin 20px padding 5px background color FFFFCC 第3课深入理解盒子模型 属性值的简写形式方法是按照规定的顺序 给出2个 3个或者4个属性值 它们的含义将有所区别 具体含义如下 如果给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 如果给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 如果给出4个属性值 依次表示上 右 下 左边框的属性 即顺时针排序 第3课深入理解盒子模型 属性值的简写形式border color redgreenborder width 1px2px3px border style dotteddashedsoliddouble 第3课深入理解盒子模型 内边距 padding outerBox width 128px height 128px padding 20px20px10px 上左右下 padding left 10px border 10pxgraydashed 第3课深入理解盒子模型 外边距 margin outerBox width 128px height 128px padding 20px20px10px 上左右下 padding left 10px border 10pxgraydashed body border 1pxblacksolid background cc0 第3课深入理解盒子模型 HTML与DOM 第3课深入理解盒子模型 标准文档流 第3课深入理解盒子模型 标记与标记div 块级元素 block span 行内元素 inline 第3课深入理解盒子模型 盒子在标准流中的定位原则实验1 行内元素之间的水平marginspan left margin right 30px background color a9d6ff span right margin left 40px background color eeb0b0 第3课深入理解盒子模型 盒子在标准流中的定位原则实验2 块级元素之间的竖直margin块元素1块元素2 第3课深入理解盒子模型 盒子在标准流中的定位原则实验3 嵌套盒子之间的margin 第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 第3课深入理解盒子模型 CSS中的几何题 第3课深入理解盒子模型 盒子的浮动准备代码 第3课深入理解盒子模型 盒子的浮动实验1 设置第1个浮动的div 第3课深入理解盒子模型 盒子的浮动实验2 设置第2个浮动的div 第3课深入理解盒子模型 盒子的浮动实验3 设置第3个浮动的div 第3课深入理解盒子模型 盒子的浮动实验4 改变浮动的方向 第3课深入理解盒子模型 盒子的浮动实验5 再次改变浮动的方向 第3课深入理解盒子模型 盒子的浮动实验6 全部向左浮动 第3课深入理解盒子模型 盒子的浮动实验7 使用clear属性清除浮动的影响 第3课深入理解盒子模型 盒子的浮动实验8 扩展盒子的高度 第4课盒子的浮动与定位 盒子的定位广义的 定位 当提到把希望某个元素放到某个位置的时候 这个动作可以称为定位操作 可以使用任何CSS规则来实现 这就是泛指的一个网页排版中的定位操作 使用传统的表格排版时 同样存在定为的问题 狭义的 定位 在CSS中有一个非常重要的属性position 这个单词要翻译为中文 也是定位的意思 然而要使用CSS进行定位操作的手段 并不仅仅通过择个属性来实现 因此不要把把二者混淆 第4课盒子的浮动与定位 盒子的定位static 这是默认的属性值 也就是该盒子按照标准流 包括浮动方式 进行布局 relative 称为相对定位 使用相对定位的盒子的位置根据常以标准流的排版方式为基础 然后使盒子相对于它在原本的标准位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 absolute 绝对定位 盒子的位置以他的包含框为基准进行偏移 绝对定位的框从标准流中脱离 这意味着它们对其后的兄弟盒子的定位没有影响 其他的盒子就好形这个盒子不存在一样 fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准 进行定位 第4课盒子的浮动与定位 盒子的定位static 这是默认的属性值 也就是该盒子按照标准流 包括浮动方式 进行布局 第4课盒子的浮动与定位 盒子的定位Relative 称为相对定位 使用相对定位的盒子的位置根据常以标准流的排版方式为基础 然后使盒子相对于它在原本的标准位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 第4课盒子的浮动与定位 盒子的定位Absolute 绝对定位 盒子的位置以他的包含框为基准进行偏移 绝对定位的框从标准流中脱离 这意味着它们对其后的兄弟盒子的定位没有影响 其他的盒子就好形这个盒子不存在一样 第4课盒子的浮动与定位 盒子的定位Fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准 进行定位 第4课盒子的浮动与定位 盒子的display属性Box 1Box 2Box 3Box 4Box 5Box 6Box 7Box 7 第4课盒子的浮动与定位 盒子的display属性Box 1Box 2Box 3Box 4Box 5Box 6Box 7Box 8 第5课介绍文字和图像的排版 CSS文字样式准备网页设置字体文字大小行高文字颜色与背景颜色文字加粗 倾斜与大小写文字的装饰效果文字的水平对齐方式文字布局段落的垂直对齐方式 第5课介绍文字和图像的排版 CSS图像样式5 2 1基本设置5 2 1背景图像5 2 1标题的图像替换 第5课介绍文字和图像的排版 CSS图像阴影基本设置柔边阴影IE6兼容 第5课介绍文字和图像的排版 CSS图像阴影 第6课链接与导航 动态超链接a link a visited text decoration none a hover a active text decoration underline 第6课链接与导航 按钮式超链接 第6课链接与导航 浮雕背景超链接 第6课链接与导航 让下划线动起来 第6课链接与导航 简单的竖直排列菜单 第6课链接与导航 横竖自由转换菜单 第7课竖直排列的导航菜单 双竖线菜单 第7课竖直排列的导航菜单 双斜角横线菜单 第7课竖直排列的导航菜单 立体菜单 第7课竖直排列的导航菜单 箭头菜单 2020 3 18 65 可编辑 第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课圆角设计 固定宽度圆角框单背景图象的带边框固定宽度圆角框 第12课圆角设计 不固定宽度的圆角框 第12课圆角设计 4图像 法 UNfixedRounded这是一个不固定宽度的圆角框 由于是宽度不固定 因此制作起来复杂一些 这个圆角框的上下随着内容增多可以自由伸展 圆角不会被破坏 此外 设置为不同的宽度 也同样适用 第12课圆角设计 5图像 二维滑动门经典圆角框 丹麦的设计师S renMadsen AListApart 的第165期 第12课圆角设计 5图像 二维滑动门经典圆角框 第12课圆角设计 5图像 二维滑动门经典圆角框 第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 0auto 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 0auto width 85 contentWrap margin right 300px float left width 100 content margin right 300px side float right width 300px pagefooter clear both 第14课可变宽度布