div+css布局教程【技术专攻】

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 指层叠样式表(Cascading Style Sheets)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）使用外联样式代替内联样式和内部样式表不推荐使用：或者是：pcolor:red;(2)使用组选择器 h1,h2,h3 color:green;(3)使用继承 不推荐使用：tdfont-size:12px;pfont-size:12px;lifont-size:12px;应该这样写 bodyfont-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，定位divposition:relative;/相对定位divposition: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专业课程