《设计彻底研究课件》由会员分享，可在线阅读，更多相关《设计彻底研究课件（126页珍藏版）》请在金锄头文库上搜索。
1、CSS设计彻底研究,第0课 CSS设计彻底研究简介,CSS崭新的“老技术” CSS带来的好处： CSS使页面载入更快； CSS可以降低网站的流量费用； CSS使设计师在修改设计时更有效率，而代价更低； CSS使整个站点保持视觉的一致性； CSS使站点可以更好地被搜索引擎找到； CSS使站点对浏览者和浏览器更具亲和力； 在世界上越来越多人采用 Web 标准时，掌握CSS可以提高设计师的职场竞争实力。,第0课 CSS设计彻底研究简介,面向读者本书面向的读者，需要两点基本要求：1：具有一定网页制作基础的读者，希望读者已经对HTML的基本元素有所了解。 2：具有钻研的精神和热情。其中第一点权重占10%
2、，第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网页样式与布局 http:/ http:/,第1章 (X)HTML与CSS核心基础,HTML与CSS的关系
4、 HTML与XHTML 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 T
5、ext. 内嵌式h1color: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 后代选择器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课 深入理解盒子模型,divborder-width:6px;border-color:#000000;margin:20px; padding:5px;background-color:#FFFFCC;,第3课 深入理解盒子模型,属性值的简写形式 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： 如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性； 如果给出3个属性值，前者表示上边框
8、的属性，中间的数值表示左右边框的属性，后者表示下边框的属性； 如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。,第3课 深入理解盒子模型,属性值的简写形式 border-color: red greenborder-width:1px 2px 3px;border-style: dotted dashed solid double;,第3课 深入理解盒子模型,内边距（padding）#outerBoxwidth: 128px;height: 128px;padding: 20px 20px 10px; /*上 左右 下*/padding-left: 10px;border:
9、 10px gray dashed;,第3课 深入理解盒子模型,外边距（margin） #outerBoxwidth: 128px;height: 128px;padding: 20px 20px 10px; /*上 左右 下*/padding-left: 10px;border: 10px gray dashed; bodyborder:1px black solid;background:#cc0;,第3课 深入理解盒子模型,HTML与DOM,第3课 深入理解盒子模型,标准文档流,第3课 深入理解盒子模型,标记与标记div：块级元素 （block） span：行内元素（inline）,第3
10、课 深入理解盒子模型,盒子在标准流中的定位原则 实验1行内元素之间的水平margin span.leftmargin-right:30px;background-color:#a9d6ff; span.rightmargin-left:40px;background-color:#eeb0b0; ,第3课 深入理解盒子模型,盒子在标准流中的定位原则 实验2块级元素之间的竖直margin 块元素1块元素2 ,第3课 深入理解盒子模型,盒子在标准流中的定位原则 实验3嵌套盒子之间的margin,第3课 深入理解盒子模型,第1个列表的第1个目内容第1个列表的第2个项目内容，内容更长一些，目的是演示自
11、动折行的效果。第2个列表的第1个项目内容第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。,CSS中的几何题ul background: #ddd; margin: 15px 15px 15px 15px;padding: 5px 5px 5px 5px; li color: black; background: #aaamargin: 20px 20px 20px 20px;padding: 10px 0px 10px 10px;list-style: none li.withborder border-style: dashed;border-width: 5px; bo
12、rder-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使用c
13、lear属性清除浮动的影响,第3课 深入理解盒子模型,盒子的浮动 实验8扩展盒子的高度,第4课 盒子的浮动与定位,盒子的定位广义的“定位”：当提到把希望某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定为的问题。 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词要翻译为中文，也是定位的意思，然而要使用CSS进行定位操作的手段，并不仅仅通过择个属性来实现，因此不要把把二者混淆。,第4课 盒子的浮动与定位,盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流
14、（包括浮动方式）进行布局。 relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。 fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。,第4课 盒子的浮动与定位,盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布
15、局。,第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课 介绍文字和图像的排版,
