div+css布局教程.ppt

DIV+CSS布局教程 The Tutorial of css+div 1div+css布局教程目录：目录：1.CSS基础知识基础知识2.网页布局常用属性网页布局常用属性3.网页布局实例网页布局实例4.Web标准化思想与网页重构标准化思想与网页重构2一、一、CSS基础知识基础知识1.css简介简介2.css语法语法3.选择器选择器4.实用小技巧实用小技巧div+css布局教程31、css简介CSS指层叠样式表指层叠样式表(Cascading Style Sheets)CSS语言是一种标记语言语言是一种标记语言,它不需要编译它不需要编译,可以直接由浏览器执行可以直接由浏览器执行样式通常存储在样式表中样式通常存储在样式表中外部样式表通常存储在外部样式表通常存储在CSS文件中文件中外部样式表可以极大提高工作效率外部样式表可以极大提高工作效率42、css语法CSS语法由三部分构成：选择器、属性和值：语法由三部分构成：选择器、属性和值：Pcolor:#ff0000;background:#000000;其中其中“p”,我们称为选择器，指明我们要给我们称为选择器，指明我们要给“p”定义样式；定义样式；样式声明写在一对大括号样式声明写在一对大括号“”中；中；Color和和background称为称为“属性属性”，不通属性之间用，不通属性之间用“；”分隔分隔“#ff0000”和和“#000000”是属性的值是属性的值52、css语法几点值得注意的地方：几点值得注意的地方：1、选择器的分组选择器的分组可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）例子：例子：h1color:green;h2color:green;h3color:green;我们可以这样写：我们可以这样写：h1,h2,h3color:green;样式太臃肿了，该减肥了!62、css语法几点值得注意的地方：几点值得注意的地方：2、继承及其问题继承及其问题根据根据CSS，子元素从父元素继承属性。，子元素从父元素继承属性。例子例子：bodyfont-family:Verdana,sans-serif;根据上面这条规则，站点的根据上面这条规则，站点的body元素将使用元素将使用Verdana字体字体通过通过CSS继承，子元素将继承最高级元素（在本例中是继承，子元素将继承最高级元素（在本例中是body）所拥有的属性（这）所拥有的属性（这些子元素诸如些子元素诸如p,td,ul,ol,ul,li,dl,dt,和和dd）如果你不希望如果你不希望“Verdana,sans-serif”字体被所有的子元素继承，又该怎么做呢字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是？比方说，你希望段落的字体是Times。我们可以这样写：我们可以这样写：pfont-family:Times,TimesNewRoman,serif;72、css语法几点值得注意的地方：几点值得注意的地方：3、层叠次序层叠次序当同一个当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？元素被不止一个样式定义时，会使用哪个样式呢？样式表分为：样式表分为：浏览器缺省设置浏览器缺省设置外部样式表外部样式表内部样式表（位于内部样式表（位于标签内部）标签内部）内联样式（在内联样式（在HTML元素内部）元素内部）优先级为：优先级为：内联样式（在内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。览器中的样式声明（缺省值）。82、css语法几点值得注意的地方：几点值得注意的地方：4、高效的高效的CSS（1）使用外联样式代替内联样式和内部样式表）使用外联样式代替内联样式和内部样式表不推荐使用：不推荐使用：或者是：或者是：pcolor:red;(2)使用组选择器使用组选择器h1,h2,h3color:green;(3)使用继承使用继承不推荐使用：不推荐使用：tdfont-size:12px;pfont-size:12px;lifont-size:12px;应该这样写应该这样写bodyfont-size:12px;92、css语法几点值得注意的地方：几点值得注意的地方：（4）使用简记属性）使用简记属性不推荐使用：不推荐使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;应该这样写应该这样写margin:1px3px4px2px;103、选择器1、CSS派生选择器派生选择器ullifont-weight:bold;定义定义ul内内li标签的样式标签的样式Pspanafont-weight:bold;定义段落下定义段落下a标签的样式标签的样式可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格表示。表示。113、选择器2、id选择器选择器id选择器可以为标有特定选择器可以为标有特定id的的HTML元素指定特定的样式。元素指定特定的样式。id选择器以选择器以“#”来定义。来定义。例子：例子：#redcolor:red;#greencolor:green;注意：注意：id属性只能在每个属性只能在每个HTML文档中出现一次。文档中出现一次。123、选择器2、类选择器、类选择器在在CSS中，类选择器以一个点号显示：中，类选择器以一个点号显示：例子：例子：.centertext-align:center注意：注意：类名的第一个字符不能使用数字类名的第一个字符不能使用数字134、实用小技巧1、桥接样式表方法、桥接样式表方法在一些大型的项目中，由于样式表文件过多，使用桥接样式表可以便捷高效在一些大型的项目中，由于样式表文件过多，使用桥接样式表可以便捷高效的管理这些样式。的管理这些样式。144、实用小技巧书写方式为：书写方式为：importurl(color.css);imporpurl(type.css);引用的样式表必须出现在其他规则之前引用的样式表必须出现在其他规则之前,样式表的头部样式表的头部,这样才能保证正常的这样才能保证正常的效果效果.154、实用小技巧2、关于、关于ID和和Class命名的规范命名的规范总体思想：语义化的命名总体思想：语义化的命名164、实用小技巧个人推荐在开发过程中逐渐形成自己的命名规范，个人推荐在开发过程中逐渐形成自己的命名规范，如如header/footer/main/hd/bd/nav/box/mode等，使用连字符等，使用连字符“-”如如site-nav/quick-menu/secondaryContent/。但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择，但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义命不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于制名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命名作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考虑方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考虑中，中，17二、网页布局常用属性二、网页布局常用属性1.css盒子模型盒子模型2.css定位和浮动定位和浮动div+css布局教程181、css盒子模型191、css盒子模型在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素#box width:70px;margin:10px;padding:5px;201、css盒子模型CSS盒子模型是在网页布局中必须用到的，其中常用的属性有：盒子模型是在网页布局中必须用到的，其中常用的属性有：Margin（外边距）（外边距）,padding(内边距内边距)分别有上下左右四个属性，分别有上下左右四个属性，topbottomleftright例子：例子：h1margin:10px0px15px5px;顺序为上、右、下、左顺时针旋转顺序为上、右、下、左顺时针旋转Padding属性的写法与属性的写法与margin一样。一样。211、css盒子模型需要注意的地方：需要注意的地方：CSS外边距合并外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。221、css盒子模型当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和，它们的上和/或下外边距也会发生合并。请看下图：或下外边距也会发生合并。请看下图：232、css定位和浮动CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。能完成的任务。CSS的定位和浮动是控制布局的重要方法。的定位和浮动是控制布局的重要方法。通过定位和浮动能够解决在表格时代往往需要代码才能完成的布局。有效的通过定位和浮动能够解决在表格时代往往需要代码才能完成的布局。有效的减少了代码量，使得页面结构更加清晰，代码更加精简。减少了代码量，使得页面结构更加清晰，代码更加精简。242、css定位和浮动我们首先必须了解一个概念：我们首先必须了解一个概念：“块级元素块级元素”，“行内元素行内元素”常见的块级元素有：常见的块级元素有：div,ul,p,h1常见行内元素有：常见行内元素有：span,strong行内元素就是在一行内的元素，只能放在行内；行内元素就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。块级元素，就是一个四方块，可以放在页面上任何地方。块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不的无素也需另起一行进行显示。（我们可以利用这个特性对不同的块进行不同的排列，这样就形成了网页的布局。）同的排列，这样就形成了网页的布局。）在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元在网页布局中，我们使用块级元素进行版面的搭建，使用行内元素对块级元素里面的内容进行修饰素里面的内容进行修饰252、css定位和浮动例子：例子：abcdefg这里的这里的div为块级元素，为块级元素，span为行内元素。为行内元素。我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小我们可以把块级元素比喻为一个大的容器，而行内元素就是其中的某一个小容器。容器。了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元了解了块级元素与行内元素之后，我们就可以利用定位和浮动属性对块级元素进行排列布局了。素进行排列布局了。262、css定位和浮动1，定位，定位divposition:relative;/相对定位相对定位divposition:absolute;/绝对定位绝对定位CSS相对定位相对定位概念：概念：元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。其它元素布局产生影响。可以理解为：可以理解为：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。定位前的形状，它原本所占的空间仍保留。272、css定位和浮动1，定位，定位例子：例子：#box_relativeposition:relative;left:30px;top:20px;我们看见，框2脱离原来的位置，相对与原占位空间偏移了一定的距离。但是框2原本的占位空间没有消失。所以相对定位不会对布局格式产生影响。（实例演示）282、css定位和浮动1，定位，定位绝对定位绝对定位概念：概念：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。个块级框，而不论原来它在正常流中生成何种类型的框。可以理解为：可以理解为：绝对定位的元素的位置相对于绝对定位的元素的位置相对于最近的已设置相对定位的父元素最近的已设置相对定位的父元素，如果文档中的元素没有已设置为相对定位的父元素，那么它的位置相对于如果文档中的元素没有已设置为相对定位的父元素，那么它的位置相对于最最初的包含块（初的包含块（body的左上角）的左上角）。292、css定位和浮动1，定位，定位绝对定位绝对定位例子：例子：#box_relativeposition:absolute;left:30px;top:20px;绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同。（实例演示）302、css定位和浮动1，定位，定位绝对定位绝对定位提示：提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置素。可以通过设置z-index属性来控制这些框的堆放次序属性来控制这些框的堆放次序。总结总结:相对定位的元素不会脱离文档流，占用文档流的空间相对定位的元素不会脱离文档流，占用文档流的空间.绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素.绝对定位的元素以最近的定位祖先元素为参照物。绝对定位的元素以最近的定位祖先元素为参照物。绝对定位应用绝对定位应用容器在浏览器中垂直居中容器在浏览器中垂直居中312、css定位和浮动2，浮动，浮动概念：概念：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动框的边框为止。属性：属性：float：left;float:right;用法：用法：请看下图，当把框请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：边缘碰到包含框的右边缘：322、css定位和浮动2，浮动，浮动网页布局中的应用：网页布局中的应用：在网页布局中，浮动是必须使用到的方法。我们常常利在网页布局中，浮动是必须使用到的方法。我们常常利用浮动使指定的块移动到我们需要的地方。比如两列，或者三列的布局。用浮动使指定的块移动到我们需要的地方。比如两列，或者三列的布局。比如横向的菜单等等比如横向的菜单等等实例：实例：如何让三列横向排列如何让三列横向排列。332、css定位和浮动2，浮动，浮动浮动的兄弟：清理浮动浮动的兄弟：清理浮动属性：属性：clear;clear属性的值可以是属性的值可以是left、right、both或或none，它表示，它表示框的哪些边不应该挨着浮动框。框的哪些边不应该挨着浮动框。为什么要用到清理浮动，我们来看一个例子。为什么要用到清理浮动，我们来看一个例子。34三、网页布局实例三、网页布局实例div+css布局教程QQformac页面分析页面分析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