(附加三)DIVCSS网页标准化布局.ppt

附加三 DIV+CSS网页标准化布局,回顾,CSS的语言的语法？ 在HTML文档中放置CSS样式的三种方式？ CSS的6种选择器的作用和使用？,预习检查,DIV+CSS对页面布局的优势？ 参与页面布局的CSS属性都有哪些？ 如何实现一个DIV层绝对定位？,本章任务,1. DIV+CSS对页面布局的优势 2.“无意义”的HTML元素div和span 3. W3C盒子模型 4. 和页面布局有关的CSS属性 5. 盒子区块框的定位 6. 使用盒子模型的浮动布局 7. DIV+CSS的兼容性问题 8. 使用盒子模型设计页面布局 9. DIV+CSS网站首页面布局实例,1. DIV+CSS对页面布局的优势,采用DIV+CSS模式的网站具有以下优势： 表现和内容相分离 代码简洁，提高页面浏览速度 易于维护和改版 提高搜索引擎对网页的索引效率,2.“无意义”的HTML元素div和span,HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用 它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。 div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。,3. W3C盒子模型,每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。,声明盒子模型的CSS属性, 盒子模型 #box /* ID为box的盒子模型 */ width:200px; /* 盒子的宽度为200px */ height:200px; /* 盒子的高度为200px */ border:5px solid #ccc; /* 盒子边框实线各边宽5px */ padding:10px; /* 盒子的4个内填充为10px */ margin:20px; /* 盒子的4个外边距为10px */ 内容区 ,4. 和页面布局有关的CSS属性,#box /* 声明ID选择器，名称为box */ position:absolute; /* 设置层的定位为绝对定位 */ top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */ left:100px; /* 层距离左点横向坐标的距离为100个像素 */ width:300px; /* 设置层的宽度为300个像素 */ height:150px; /* 设置层的高度为150个像素 */ overflow:auto; /* 当内容超出层的范围时显示滚动条 */ z-index:1; /* 设置层的先后顺序为覆盖关系 */ visibility:visible; /* 无论父层是否可见，子层都可见 */ ,5. 盒子区块框的定位,相对定位： 绝对定位：,a:hover /* 定义a元素的伪选择器，当鼠标移动到链接上时改变样式 */ position:relative; /* 设置元素使用相对定位 */ top:1px; /* 鼠标进入时a元素将出现在原位置顶部下面1px的地方 */ left:1px; /* 鼠标进入时a元素将出现在原位置右边1px的地方 */ , #demo /* 定义一个ID选择器 */ position:absolute; /* 使用绝对位置进行定位 */ width:300px; /* 定义盒子宽度为300px */ height:300px; /* 定义盒子高度为300px */ top:100px; /* 定义盒子距离网页顶部100px */ left:200px; /* 定义盒子距离网页左边200px */ background:#BABABA; /* 定义盒子的背景颜色为灰色 */ z-index:1; /* 定义盒子位于上一层中 */ 我是一个盒子区块，我现在在网页中的哪个位置呢？, 登录框的盒子模型定位 #login /* 定义一个ID选择器 */ width:300px; /* 定义盒子宽度为300px */ height:200px; /* 定义盒子高度为200px */ position:absolute; /* 使用绝对位置进行定位 */ left:50%; /* 左部盒子开始位置是页面宽度的50% */ top:50%; /* 顶部盒子开始位置是页面高度的50% */ margin-left:-150px; /* 左部开始位置再退回盒子宽度的一半 */ margin-top:-100px; /* 顶部开始位置再退回盒子高度的一半 */ background:#BABABA; /* 定义盒子的背景颜色为灰色 */ 登录框的盒子模型 ,6、使用盒子模型的浮动布局,虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。,6.1 设置浮动,6.2 行框和清理,在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。, .left /* 声明一个css类选择器，名子为left */ width:200px; /* 盒子模型宽度为200px*/ height:200px; /* 盒子模型高度为200px */ margin:10px; /* 盒子模型外边距为10px */ border:solid 1px; /* 盒子1像素的实线边框 */ float:left; /* 设置盒子向左浮动，脱离了文档流 */ .noleft /* 声明另一个css类选择器，名子为noleft */ width:200px; /* 设置盒子模型的宽度为200px */ height:200px; /* 设置盒子模型的高度为200px */ border:solid 1px; /* 设置盒子有一个像素的实线边框 */ background:#ccc; /* 设置盒子模型背景为灰色 */ 框（一） 框（二） 框（三） , .left /* 声明一个css类选择器，名子为left */ width:200px; /* 盒子模型的宽度为200px */ height:200px; /* 盒子模型的高度也为200px */ margin:10px; /* 盒子模型的外边距为10px */ border:solid 1px; /* 盒子有1像素实线边框 */ float:left; /* 盒子向左浮动，脱离了文档流*/ .noleft /* 声明另1个css类选择器，名子为noleft */ width:200px; /* 盒子模型宽度为200px */ height:200px; /* 盒子模型的高度为200px */ border:solid 1px; /* 盒子有1像素实线边框 */ background:#ccc; /* 设置盒子模型背景为灰色 */ clear:both; /* 设置盒子模型两边都不能挨着浮动区块 */ 框（一） 框（二） 框（三） ,7. DIV+CSS的兼容性问题,1. 不同浏览器解释盒子模型的差异 2. 设置浏览器去遵循W3C标准,8、使用盒子模型设计页面布局,8.1 区块居中设计 8.2 设置两列浮动的布局 8.3 设置三列浮动的布局 8.4 设置多列浮动的布局, 居中设计 body /* 为网页主体内容区域设置样式 */ margin:0; /* 设定网页外部边距值为0，消除body默认值 */ padding:0; /* 设定网页内部边距值为0，消除body默认值 */ text-align:center; /* 为了在IE中设置主体容器盒子居中 */ #container /* 为布局的最外层容器使用ID选择器设置样式 */ width:966px; /* 设置最外层容器宽度为966px */ margin:0 auto; /* 设置外边距上下为0，左右自动，则在FF中居中 */ text-align:left; /* 再将主容器中的文本内容调回为居左显示 */ background:#888; /* 临时设置一下背景颜色显示主容器布局效果 */ height:800px; /* 也是临时设置一下高度显示主容器的布局效果 */ 最外层的容器div在屏幕上水平居中 , 设置两列浮动 body margin:0; padding:0; text-align:center; #container width:966px; margin:0 auto; text-align:left; #left_main /* 设置左部导航区块的CSS布局样式 */ float:left; /* 设置该区块框向左浮动，脱离文档流 */ width:256px; /* 设定该区块框的宽度为256px */ height:400px; /* 设定该区块框的高度为400px,临时设置 */ border:1px solid; /* 设定该区块框的边框为1px的直线边框 */ #right_content float:right; /* 设置该区块框向右浮动，脱离文档流 */ width:700px; /* 设定该区块框的宽度700px */ height:400px; /* 设定该区块框的高度400px,临时设置 */ border:1px solid; /* 设定该区块框的边框为1px的直线边框 */ 主导航区块 内容区块 ,设置三列浮动 body margin:0; padding:0; text-align:center; #container width:966px; margin:0 auto; text-align:left; #left_main float:left; width:256px; height:400px;border:1px solid; #right_content float:right; width:700px; #left_box /* 设置左部主要内容区块的CSS布局样式 */ float:left; /* 设置该区块框向左浮动，脱离文档流 */ width:400px; /* 设定该区块框的宽度为400个像素 */ height:400px; /* 设定该区块框的高度为400个像素，临时设置*/ border:1px solid;/* 设定该区块框的边框为1px的直线边框 */ #right_box /* 设置右部次要内容区块的CSS布局样式 */ float:right; /* 设置该区块框向右浮动，脱离文档流 */ width:290px; /* 设定该区块框的宽度为290个像素 */ height:400px; /* 设定该区块框的高度为400个像素，临时设置 */ border:1px solid; /* 设定该区块框的边框为1px的直线边框 */ ,body margin: 0; padding: 0; text-align: center; #menu /* 声明ID选择器，用于设置菜单的样式 */ width:800px; /* 菜单区块的宽度设置为800px */ margin:0 auto; /* 菜单区块设置为水平居中 */ text-align:left; /* 将文本设置回原来的居左 */ background:#ccc;/* 为菜单条设置一个灰色背景 */ #menu ul /* 为了兼容性将列表中原有样式全部清除*/ float:left; /* 设置向左浮动，目的是脱离文档流 */ margin:0px; /* 设置列表外边距为0 */ paddin