CSS设计彻底研究.ppt

1、CSS设计彻底研究,第0课 CSS设计彻底研究简介,CSS崭新的“老技术” CSS带来的好处： CSS使页面载入更快； CSS可以降低网站的流量费用； CSS使设计师在修改设计时更有效率，而代价更低； CSS使整个站点保持视觉的一致性； CSS使站点可以更好地被搜索引擎找到； CSS使站点对浏览者和浏览器更具亲和力； 在世界上越来越多人采用 Web 标准时，掌握CSS可以提高设计师的职场竞争实力。,第0课 CSS设计彻底研究简介,面向读者 本书面向的读者，需要两点基本要求： 1：具有一定网页制作基础的读者，希望读者已经对HTML的基本元素有所了解。 2：具有钻研的精神和热情。 其中第一点权重占

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章：介绍了对表格的样式的设置方法，通

3、过制作复杂的多模式日历。 第11章：深入讲解了制作圆角框的多种方法，深入分析了不同方法的特点和使用范围。 第12章：介绍了在近年出现的一些新的网页元素的制作方法，例如Tab面板、折叠面板、伸缩面板等等。 第13和14章：全面地归纳和总结了不同形式布局的设计方法，并给出全面的案例。 第15至17章：以CSS禅意花园的作品为例，在研究成功作品的基础上，制作了自己的CSS禅意花园作品，从而演示了对整体页面的布局方法。,第0课 CSS设计彻底研究简介,学习资料 CSS设计彻底研究即将出版 精通CSS+DIV网页样式与布局 ,第1章 (X)HTML与CSS核心基础,HTML与CSS的关系 HTML与XH

4、TML DOCTYPE（文档类型）的含义与选择 ,第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的方法 行内式 This is a line of Text. 内嵌

5、式 h1 color:white; background-color:blue ,第1章 (X)HTML与CSS核心基础,在HTML中引入CSS的方法 导入式 importmystyle.css; 链接式 ,第1章 (X)HTML与CSS核心基础,基本CSS选择器 含义和作用 标记选择器 类别选择器 ID选择器,第1章 (X)HTML与CSS核心基础,复合选择器 “交集”选择器 div.special div#special “并集”选择器 div, h1.first, p.specia 后代选择器 div h1.first span.firstLetter,第1章 (X)HTML与CSS核心

6、基础,CSS的继承特性 (1315.htm),第1章 (X)HTML与CSS核心基础,CSS的层叠特性 (16.htm) 行内样式 ID样式 类别样式 标记样式 这是第1行文本 这是第2行文本 这是第3行文本 这是第4行文 这是第5行文本,第2课 “CSS禅意花园”, 如何查找作品,第2课 “CSS禅意花园”, 郊野两列布局 像素画三列布局 百合池塘三列布局变体 郁金香多列布局 日与夜包含圆角的设计 Si6包含倾斜的设计,第2课 “CSS禅意花园”, 如何查找作品 谷香食品主题设计 城市建筑主题设计 “卡通版”禅意花园特色效果 收音机特色效果 杀手风格特色效果 海底世界特色效果 博物馆特色设计

7、 剧院效果特色效果,第3课 深入理解盒子模型,什么是“模型”本质特征的抽象 布局的“模型”,第3课 深入理解盒子模型,什么是“模型”本质特征的抽象 布局的“模型”,第3课 深入理解盒子模型,div border-width:6px; border-color:#000000; margin:20px; padding:5px; background-color:#FFFFCC; ,第3课 深入理解盒子模型,属性值的简写形式 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个

8、属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。,第3课 深入理解盒子模型,属性值的简写形式 border-color: red green border-width:1px 2px 3px; border-style: dotted dashed solid double;,第3课 深入理解盒子模型,内边距（padding） #outerBox width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-

9、left: 10px; border: 10px gray dashed; ,第3课 深入理解盒子模型,外边距（margin） #outerBox width: 128px; height: 128px; padding: 20px 20px 10px; /*上 左右 下*/ padding-left: 10px; border: 10px gray dashed; body border:1px black solid; background:#cc0; ,第3课 深入理解盒子模型,HTML与DOM,第3课 深入理解盒子模型,标准文档流,第3课 深入理解盒子模型,标记与标记 div：块级元素

10、 （block） span：行内元素（inline）,第3课 深入理解盒子模型,盒子在标准流中的定位原则 实验1行内元素之间的水平margin span.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个列

11、表的第1个目内容 第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。 第2个列表的第1个项目内容 第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。 ,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.withborde

12、r 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课 深入理解

13、盒子模型,盒子的浮动 实验6全部向左浮动,第3课 深入理解盒子模型,盒子的浮动 实验7使用clear属性清除浮动的影响,第3课 深入理解盒子模型,盒子的浮动 实验8扩展盒子的高度,第4课 盒子的浮动与定位,盒子的定位 广义的“定位”：当提到把希望某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定为的问题。 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词要翻译为中文，也是定位的意思，然而要使用CSS进行定位操作的手段，并不仅仅通过择个属性来实现，因此不要把把二者混淆。

14、,第4课 盒子的浮动与定位,盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。 fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。,第4课 盒子的浮动与

15、定位,盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。,第4课 盒子的浮动与定位,盒子的定位 Relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。,第4课 盒子的浮动与定位,盒子的定位 Absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。,第4课 盒子的浮动与定位,盒子的定位 Fixe

16、d：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。,第4课 盒子的浮动与定位,盒子的display属性 Box-1 Box-2 Box-3 Box-4 Box-5 Box-6 Box-7 Box-7 ,第4课 盒子的浮动与定位,盒子的display属性 Box-1 Box-2 Box-3 Box-4 Box-5 Box-6 Box-7 Box-8 ,第5课 介绍文字和图像的排版,CSS文字样式 准备网页 设置字体 文字大小 行高 文字颜色与背景颜色 文字加粗、倾斜与大小写 文字的装饰效果 文字的水平对齐方式 文字布局 段落的垂直对齐方式,第5课 介绍文字和图像的排版,CSS

17、图像样式 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课

18、竖直排列的导航菜单,双竖线菜单,第7课 竖直排列的导航菜单,双斜角横线菜单,第7课 竖直排列的导航菜单,立体菜单,第7课 竖直排列的导航菜单,箭头菜单,第7课 竖直排列的导航菜单,带说明信息的菜单,第8课 水平排列的导航菜单,自适应的水平菜单,第8课 水平排列的导航菜单,自适应的斜角水平菜单,第8课 水平排列的导航菜单,应用滑动门技术的玻璃效果菜单,第8课 水平排列的导航菜单,三状态玻璃效果菜单（双层滑动门应用）,第8课 水平排列的导航菜单,不使用图像的圆角菜单,第8课 水平排列的导航菜单,会跳起的多彩菜单,第9课 下拉菜单,第1步,第9课 下拉菜单,第2步,第9课 下拉菜单,第3步,第9课

19、下拉菜单,第4步,第9课 下拉菜单,第5步,第9课 下拉菜单,第6步,第10课 表格也精彩,HTML结构,第10课 表格也精彩,Excel方式二维变色提示的表格,第10课 表格也精彩,三种显示模式的日历,第10课 表格也精彩,三种显示模式的日历,第10课 表格也精彩,三种显示模式的日历,第11课 高级网页元素,Tab面板,第11课 高级网页元素,折叠面板,第11课 高级网页元素,伸缩面板,第12课 圆角设计,示例,第12课 圆角设计,固定宽度圆角框 两背景图像法,第12课 圆角设计,固定宽度圆角框 带边框的固定宽度圆角框,第12课 圆角设计,固定宽度圆角框 单背景图象的带边框固定宽度圆角框,第

20、12课 圆角设计,不固定宽度的圆角框,第12课 圆角设计,“4图像”法, UNfixed Rounded 这是一个不固定宽度的圆角框，由于是宽度不固定，因此制作起来复杂一些。这个圆角框的上下随着内容增多可以自由伸展，圆角不会被破坏。此外，设置为不同的宽度，也同样适用。 ,第12课 圆角设计,“5图像”二维滑动门经典圆角框,丹麦的设计师Sren Madsen,“A List Apart”的第165期,第12课 圆角设计,“5图像”二维滑动门经典圆角框,第12课 圆角设计,“5图像”二维滑动门经典圆角框,第13课 固定宽度局,CSS排版观念 1-2-1布局,第13课 固定宽度局,1-3-1布局,第

21、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

22、; 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