CSS设计彻底研究ppt课件.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.内嵌式h1color:white;background-color:blue,10,第1章(X)HTML与CSS核心基础,在HTML中引入CSS的方法导入式importmystyle.css;链接式,11,第1章(X)HTML与CSS核心基础,基本CSS选择器含义和作用标记选择器类别选择器ID选择器,12,第1章(X)HTML与CSS核心基础,复合选择器“交集”选择器div.specialdiv#special“并集”选择器div,h1.first,p.specia后代选择器divh1.firstspan.firstLetter,13,第1章(X)HTML与CSS核心基础,CSS的继承特性(1315.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课深入理解盒子模型,divborder-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）#outerBoxwidth:128px;height:128px;padding:20px20px10px;/*上左右下*/padding-left:10px;border:10pxgraydashed;,24,第3课深入理解盒子模型,外边距（margin）#outerBoxwidth:128px;height:128px;padding:20px20px10px;/*上左右下*/padding-left:10px;border:10pxgraydashed;bodyborder:1pxblacksolid;background:#cc0;,25,第3课深入理解盒子模型,HTML与DOM,26,第3课深入理解盒子模型,标准文档流,27,第3课深入理解盒子模型,标记与标记div：块级元素（block）span：行内元素（inline）,28,第3课深入理解盒子模型,盒子在标准流中的定位原则实验1行内元素之间的水平marginspan.leftmargin-right:30px;background-color:#a9d6ff;span.rightmargin-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中的几何题ulbackground:#ddd;margin:15px15px15px15px;padding:5px5px5px5px;licolor:black;background:#aaamargin:20px20px20px20px;padding:10px0px10px10px;list-style:noneli.withborderborder-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:visitedtext-decoration:none;a:hover,a:activetext-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图像”二维滑动门经典圆角框,丹麦的设计师SrenMadsen,“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,#containermargin:0auto;width：760px;/*删除原来的固定宽度*/width:85%;/*改为比例宽度*/#contentfloat:right;width：500px;/*删除原来的固定宽度*/width:66%;/*改为比例宽度*/#sidefloat:left;width：260px;/*删除原来的固定宽度*/width:33%;/*改为比例宽度*/,104,第14课可变宽度布局剖析与制作,两列等比例布局,105,第14课可变宽度布局剖析与制作,两列等比例布局,106,第14课可变宽度布局剖析与制作,1-2-1单列变宽布局,107,第14课可变宽度布局剖析与制作,1-2-1单列变宽布局改进浮动法,#header,#pagefooter,#containermargin:0auto;width:85%;#contentWrapmargin-right:-300px;float:left;width:100%;#contentmargin-right:300px;#sidefloat:right;width:300px;#pagefooterclear:both;,108,第14课可变宽度布局剖析与制作,“1-3-1”宽度适应布局对于“1-3