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

附加三 DIV+CSS网页标准化布局,回顾,CSS的语言的语法？在HTML文档中放置CSS样式的三种方式？CSS的6种选择器的作用和使用？,预习检查,DIV+CSS对页面布局的优势？参与页面布局的CSS属性都有哪些？如何实现一个DIV层绝对定位？,本章任务,1.DIV+CSS对页面布局的优势2.“无意义”的HTML元素div和span3.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*/padding:0px;/*设置列表内边距为0*/list-style:none;/*消除列表原有类型*/#menu ul li/*设置每个菜单项列表的样式*/float:left;/*设置都向左浮动*/width:99px;/*每个菜单项宽度为99px*/display:block;/*改变为块标记的区块*/line-height:30px;/*设置行高为30px,目的是垂直居中*/text-align:center;/*设置文本水平居中*/#menu.menudiv/*设置菜单项之间的分隔条隔离带*/float:left;/*也是向左浮动和菜单项在一个文档流*/width:1px;/*只要一个像素的宽度*/height:20px;/*高度为20个像素*/background:#888;/*设置这个分隔条为深灰色*/margin-top:5px;/*设置上边距为5个像素，目的是垂直居中*/,菜单（一）菜单（二）菜单（三）菜单（四）菜单（五）菜单（六）菜单（七）菜单（八）,9.DIV+CSS网站首页布局实例,总 结,本章必须掌握的知识点：DIV+CSS布局页面的优势W3C的盒子模型的声明和布局有关的CSS样式属性和值使用盒子区块的浮动布局解决DIV+CSS的兼容性问题,谢 谢,