div+css布局教程PPT学习课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,DIV+CSS,布局教程,The Tutorial of css+div,1,div+css,布局教程,目录,：,1.,CSS,基础知识,2.,网页布局常用属性,3.,网页布局实例,4.Web,标准化思想与网页重构,2,一、,CSS,基础知识,1.css,简介,2.css,语法,3.,选择器,4.,实用小技巧,div+css,布局教程,3,1,、,css,简介,CSS,指层叠样式表,(,C,ascading,S,tyle,S,heets,),CSS,语言是一种标记语言,它不需要编译,可以直接由浏览器执行,样式通常存储在样式表中,外部样式表通常存储在,CSS,文件中,外部样式表可以极大提高工作效率,4,2,、,css,语法,CSS,语法由三部分构成：选择器、属性和值：,Pcolor:#ff0000;background:#000000;,其中,“,p,”,我们称为选择器，指明我们要给,“,p,”,定义样式；,样式声明写在一对大括号,“,”,中；,Color,和,background,称为,“,属性,”,，不通属性之间用,“,；,”,分隔,“,#ff0000,”,和,“,#000000,”,是属性的值,5,2,、,css,语法,几点值得注意的地方：,1,、,选择器的分组,可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）,例子：,h1color:green;,h2color:green;,h3color:green;,我们可以这样写：,h1,h2,h3 color:green;,样式太臃肿了，该减肥了,!,6,2,、,css,语法,几点值得注意的地方：,2,、,继承及其问题,根据,CSS,，子元素从父元素继承属性。,例子,：,body font-family:Verdana,sans-serif;,根据上面这条规则，站点的,body,元素将使用,Verdana,字体,通过,CSS,继承，子元素将继承最高级元素（在本例中是,body,）所拥有的属性（这些子元素诸如,p,td,ul,ol,ul,li,dl,dt,和,dd,）,如果你不希望,“,Verdana,sans-serif,”,字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是,Times,。,我们可以这样写：,p font-family:Times,Times New Roman,serif;,7,2,、,css,语法,几点值得注意的地方：,3,、,层叠次序,当同一个,HTML,元素被不止一个样式定义时，会使用哪个样式呢？,样式表分为：,浏览器缺省设置,外部样式表,内部样式表（位于,标签内部）,内联样式（在,HTML,元素内部）,优先级为：,内联样式（在,HTML,元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：,标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。,8,2,、,css,语法,几点值得注意的地方：,4,、,高效的,CSS,（,1,）使用外联样式代替内联样式和内部样式表,不推荐使用：,或者是：,p,color:red;,(2),使用组选择器,h1,h2,h3 color:green;,(3),使用继承,不推荐使用：,td,font-size:12px;,p,font-size:12px;,li,font-size:12px;,应该这样写,body,font-size:12px;,9,2,、,css,语法,几点值得注意的地方：,（,4,）使用简记属性,不推荐使用：,margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;,应该这样写,margin:1px 3px 4px 2px;,10,3,、,选择器,1,、,CSS,派生选择器,ul li font-weight:bold;,定义,ul,内,li,标签的样式,P span afont-weight:bold;,定义段落下,a,标签的样式,可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格表示。,11,3,、,选择器,2,、,id,选择器,id,选择器可以为标有特定,id,的,HTML,元素指定特定的样式。,id,选择器以,“,#,”,来定义。,例子：,#red color:red;#green color:green;,注意：,id,属性只能在每个,HTML,文档中出现一次。,12,3,、,选择器,2,、类选择器,在,CSS,中，类选择器以一个点号显示：,例子：,.center text-align:center,注意：,类名的第一个字符不能使用数字,13,4,、,实用小技巧,1,、,桥接样式表方,法,在一些大型的项目中，由于样式表文件过多，使用桥接样式表可以便捷高效的管理这些样式。,14,4,、,实用小技巧,书写方式为：,import url(color.css);,imporp url(type.css);,引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的效果,.,15,4,、,实用小技巧,2,、关于,ID,和,Class,命名的规范,总体思想：语义化的命名,16,4,、,实用小技巧,个人推荐在开发过程中逐渐形成自己的命名规范，,如,header/footer/main/hd/bd/nav/box/mode,等，使用连字符,“,-,”,如,site-nav/quick-menu/secondaryContent/,。,但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考虑中，,17,二、网页布局常用属性,1.css,盒子模型,2.css,定位和浮动,div+css,布局教程,18,1,、,css,盒子模型,19,1,、,css,盒子模型,在,CSS,中，,width,和,height,指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。,假设框的每个边上有,10,个像素的外边距和,5,个像素的内边距。如果希望这个元素框达到,100,个像素，就需要将内容的宽度设置为,70,像素,#box width:70px;margin:10px;padding:5px;,20,1,、,css,盒子模型,CSS,盒子模型是在网页布局中必须用到的，其中常用的属性有：,Margin,（外边距）,padding,(,内边距,),分别有上下左右四个属性，,top bottom left right,例子：,h1 margin:10px 0px 15px 5px;,顺序为上、右、下、左顺时针旋转,Padding,属性的写法与,margin,一样。,21,1,、,css,盒子模型,需要注意的地方：,CSS,外边距合并,外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。,合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。,22,1,、,css,盒子模型,当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和,/,或下外边距也会发生合并。请看下图：,23,2,、,css,定位和浮动,CSS,为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。,CSS,的定位和浮动是控制布局的重要方法。,通过定位和浮动能够解决在表格时代往往需要代码才能完成的布局。有效的减少了代码量，使得页面结构更加清晰，代码更加精简。,24,2,、,css,定位和浮动,我们首先必须了解一个概念：,“,块级元素,”,，,“,行内元素,”,常见的块级元素有：,div,ul,p,h1,常见行内元素有：,span,strong,行内元素就是在一行内的元素，只能放在行内；,块级元素，就是一个四方块，可以放在页面上任何地方。,块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不同的排列，这样就形成了网页的布局。）,在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元素里面的内容进行修饰,25,2,、,css,定位和浮动,例子：,abcdefg,这里的,div,为块级元素，,span,为行内元素。,我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小容器。,了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元素进行排列布局了。,26,2,、,css,定位和浮动,1,，定位,div,position:relative;,/,相对定位,div,position:absolute;,/,绝对定位,CSS,相对定位,概念：,元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。,可以理解为：,设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。,27,2,、,css,定位和浮动,1,，定位,例子：,#box_relative position:relative;left:30px;top:20px;,我们看见，框,2,脱离原来的位置，相对与原占位空间偏移了一定的距离。但是框,2,原本的占位空间没有消失。所以相对定位不会对布局格式产生影响。（实例演示）,28,2,、,css,定位和浮动,1,，定位,绝对定位,概念：,设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。,可以理解为：,绝对定位的元素的位置相对于,最近的已设置相对定位的父元素,，如果文档中的元素没有已设置为相对定位的父元素，那么它的位置相对于,最初的包含块（,body,的左上角）,。,29,2,、,css,定位和浮动,1,，定位,绝对定位,例子：,#box_relative position:absolute;left:30px;top:20px;,绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。（实例演示）,30,2,、,css,定位和浮动,1,，定位,绝对定位,提示：,因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置,z-index,属性来控制这些框的堆放次序,。,总结,:,相对定位的元素不会脱离文档流，占用文档流的空间,.,绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素,.,绝对定位的元素以最近的定位祖先元素为参照物。,绝对定位应用,容器在浏览器中垂直居中,31,2,、,css,定位和浮动,2,，浮动,概念：,浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。,属性：,float,：,left;float:right;,用法：,请看下图，当把框,1,向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：,32,2,、,css,定位和浮动,2,，浮动,网页布局中的应用：,在网页布局中，浮动是必须使用到的方法。我们常常利用浮动使指定的块移动到我们需要的地方。比如两列，或者三列的布局。,比如横向的菜单等等,实例：,如何让三列横向排列,。,33,2,、,css,定位和浮动,2,，浮动,浮动的兄弟：清理浮动,属性：,clear;,clear,属性的值可以是,left,、,right,、,both,或,none,，它表示框的哪些边不应该挨着浮动框。,为什么要用到清理浮动，我们来看一个例子。,34,三、网页布局实例,div+css,布局教程,QQ for mac,页面分析,35,四、,web,标准化思想与网页重构,所谓,web,标准化，有两层含义。,一、就是,W3C,系列规范，,html4.0,，,xhtml1.0,，,css2.1,，,ECMAScript,，,DOM,XML,等等，作为一个页面工程师，要学会熟读标准，认识和了解标准。,W3C,标准就是让页面在不同的终端都可以运行，让使用各种终端的用户都能浏览你的页面，也就是跨越平台，获得更大众化的用户的使用。,div+css,布局教程,36,四、,web,标准化思想与网页重构,二、结构，表现，行为三者的分离。结构是严格的语义化,HTML,文档编写，,CSS,是,HTML,页面的视觉处理，行为是通过用户行为的触发去动态改变页面，内容修改，功能的完成等等。分离不是简单的文件的分离，而是严格的分工的分离，不要用,table,去布局，那是,css,的事情，不要用,hx,去调整字体大小，那也是,CSS,的事情。,结构,=,内容,+,语义化的解释内容。,表现,=,页面内容的呈现效果。,行为,=,用户触发去改变内容和,HTML,和,CSS,。,div+css,布局教程,37,四、,web,标准化思想与网页重构,网页重构，从语义化标签开始！,所谓语义化标签，就是让页面中每一个标签都有存在的意义。各尽其用，比如,h1,定义标题，,p,用来定义段落，,ul,为无序列表,table,的存在就是为了标记列表的数据。,所以并非在布局中无论什么情况都用,div,，,html,语言在设计的时候并不只有,div,一个标签，我们之所以喜欢使用,div,布局，是因为,div,的属性有助于方便的控制布局。,div+css,布局教程,38,四、,web,标准化思想与网页重构,所以网页重构不等于,div+css,重构小提示：,1,、减少使用,div,标签,;,2,、应该用,div,定义页面的主要框架结构，比如头部、内容、边栏和底部等结构,;,3,、内容应该使用语义化的,html,标签，而不是,div,标签,;,div+css,布局教程,39,谢谢大家！,希望大家在网页重构这条并不平坦的道路上越走越远,Thank you!,40,