《附加三DIVCSS网页标准化布局.ppt》由会员分享，可在线阅读，更多相关《附加三DIVCSS网页标准化布局.ppt（29页珍藏版）》请在金锄头文库上搜索。
1、附加三 DIV+CSS网页标准化布局回顾回顾vCSSCSS的语言的语法？的语言的语法？v在在HTMLHTML文档中放置文档中放置CSSCSS样式的三种方式？样式的三种方式？vCSSCSS的的6 6种选择器的作用和使用？种选择器的作用和使用？预习检查预习检查vDIV+CSSDIV+CSS对页面布局的优势？对页面布局的优势？v参与页面布局的参与页面布局的CSSCSS属性都有哪些？属性都有哪些？v如何实现一个如何实现一个DIVDIV层绝对定位？层绝对定位？本章任务本章任务v1. DIV+CSS1. DIV+CSS对页面布局的优势对页面布局的优势v2.2.“无意义无意义”的的HTMLHTML元素元素d
2、ivdiv和和spanspanv3. W3C3. W3C盒子模型盒子模型v4. 4. 和页面布局有关的和页面布局有关的CSSCSS属性属性v5. 5. 盒子区块框的定位盒子区块框的定位v6. 6. 使用盒子模型的浮动布局使用盒子模型的浮动布局v7. DIV+CSS7. DIV+CSS的兼容性问题的兼容性问题v8. 8. 使用盒子模型设计页面布局使用盒子模型设计页面布局v9. DIV+CSS9. DIV+CSS网站首页面布局实例网站首页面布局实例1. DIV+CSS1. DIV+CSS对页面布局的优势对页面布局的优势v采用DIV+CSS模式的网站具有以下优势：表现和内容相分离代码简洁，提高页面浏
3、览速度易于维护和改版提高搜索引擎对网页的索引效率2.2.“无意义无意义”的的HTMLHTML元素元素divdiv和和spanspanvHTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是spanspan和和divdiv是是“无意义无意义”的标签的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用v它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性clas
4、s和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。vdiv的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。3. W3C3. W3C盒子模型盒子模型v每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度
5、（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。声明盒子模型的CSS属性属性属性描述描述margin是定义区块外边界与上级元素距离的属性，用1到4个值来设置元素的边界，每个值都是长度、百分比或者auto，百分比值参考上级元素的宽度，允许使用负边界值。还可以使用margin-top/margin-right/margin-bottom/margin-leftpadding用于设置区域的内边距属性，是边框和元素内容之间的间隔距离。可以使用：padding-top/padding-r
6、ight/padding-bottom/padding-left border边框属性用于设置一个元素边框风格、边框风格、边框颜色、可以一起设置4边的边框，也可对上边框、有边框、下边框和右边框进行单独设置，详见上一次的课件内容。width层的宽度，可以为一个长度或“auto”值，不允许使用负值height层的高度，可以为一个长度或“auto”值，不允许使用负值 盒子模型盒子模型 #box /* ID为box的盒子模型的盒子模型 */ width:200px; /* 盒子的盒子的宽度度为200px */ height:200px; /* 盒子的高度盒子的高度为200px */ border:5p
7、x solid #ccc; /* 盒子盒子边框框实线各各边宽5px */ padding:10px; /* 盒子的盒子的4个内填充个内填充为10px */ margin:20px; /* 盒子的盒子的4个外个外边距距为10px */ 内容区内容区 4. 4. 和页面布局有关的和页面布局有关的CSSCSS属性属性属属 性性描描 述述position用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）top层距离顶点纵坐标的距离left层距离顶点横坐标的距离text-align横向排列，可以使用left(左对齐)、right(右对齐)
8、和center局中line-height指定行高，内容都是在行的中间，所以可以使用这个属性设置内容垂直居中。这个属性接受一个控制文本基线之间的间隔值，可以是数字，表示字体大小乘以该数所得。也可以使用百分比z-index决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素display是一个显示属性，设定block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示属属 性性描描 述述visibility这个属性是针对嵌套层的设置，如果存在嵌套
9、的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏overflow用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才显示滚动条属属 性性描描 述述padding用于设置区块的内边距属性，是边框和元
10、素内容之间的间隔距离。与margin属性相返，但使用的是相同属性值。是上补白padding-top、右补白padding-right、下补白padding-bottom和左补白padding-left属性的略写float设置区块漂浮属性，允许网页制作者将文本环绕在一个元素的周围，可以使用左漂浮left值，右漂浮right值clear清除属性指定一个元素是否允许有元素漂浮在它的旁边。值left移动元素到在其左边的漂浮的元素的下面；同样的值right移动到其右边的漂浮的元素下面。其他的还有缺省的none值，和移动元素到其两边的漂浮的元素的下面的both值#box /* 声明ID选择器，名称为box
11、 */ position:absolute; /* 设置层的定位为绝对定位 */ top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */ left:100px; /* 层距离左点横向坐标的距离为100个像素 */ width:300px; /* 设置层的宽度为300个像素 */ height:150px; /* 设置层的高度为150个像素 */ overflow:auto; /* 当内容超出层的范围时显示滚动条 */ z-index:1; /* 设置层的先后顺序为覆盖关系 */ visibility:visible; /* 无论父层是否可见，子层都可见 */ 5. 5. 盒子区块
12、框的定位盒子区块框的定位v相对定位：相对定位：v绝对定位：绝对定位：a:hover /* 定义a元素的伪选择器，当鼠标移动到链接上时改变样式 */ position:relative; /* 设置元素使用相对定位 */ top:1px; /* 鼠标进入时a元素将出现在原位置顶部下面1px的地方 */ left:1px; /* 鼠标进入时a元素将出现在原位置右边1px的地方 */ #demo /* 定义一个ID选择器 */ position:absolute; /* 使用绝对位置进行定位 */ width:300px; /* 定义盒子宽度为300px */ height:300px; /* 定义
13、盒子高度为300px */ top:100px; /* 定义盒子距离网页顶部100px */ left:200px; /* 定义盒子距离网页左边200px */ background:#BABABA; /* 定义盒子的背景颜色为灰色 */ z-index:1; /* 定义盒子位于上一层中 */ 我是一个盒子区我是一个盒子区块，我，我现在在网在在网页中的哪个位置呢？中的哪个位置呢？ 登登录框的盒子模型定位框的盒子模型定位 #login /* 定义一个ID选择器 */ width:300px; /* 定义盒子宽度为300px */ height:200px; /* 定义盒子高度为200px */
14、position:absolute; /* 使用绝对位置进行定位 */ left:50%; /* 左部盒子开始位置是页面宽度的50% */ top:50%; /* 顶部盒子开始位置是页面高度的50% */ margin-left:-150px; /* 左部开始位置再退回盒子宽度的一半 */ margin-top:-100px; /* 顶部开始位置再退回盒子高度的一半 */ background:#BABABA; /* 定义盒子的背景颜色为灰色 */ 登登录框的盒子模型框的盒子模型 6 6、使用盒子模型的浮动布局、使用盒子模型的浮动布局 虽然使用绝对定位可以实现页面布局，但由于调整某个区块框时其
15、它区块的位置并不会跟随着改变，所以并不是布局的首选方式。而使用浮动的区块框可以向左或向右移动，直到它的外边缘碰到包含它区块的边框或另一个浮动框的边框为止。并且由于浮动框不在文档的普通流中，所以文档的普通流中的区块框表现得就像浮动框不存在一样。6.1 设置浮动6.26.2 行框和清理行框和清理在进行页面布局时，经常需要设置多个区块框并列在一行中排列。最常见的方式就是使用float属性，再通过left或right值移动区块框向左或向右浮动。但当前面并列的多个区块框总宽度不足包含框的100%时，就会在行框中留出一定的宽度，而下面的某个区块框又恰好满足这个宽度，则很可能会向上提，和上一行并列的区块框在
16、同一行排列。而这不并是我们想要的结果，所以可以使用clear属性解决这一问题，该属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。 .left /* 声明一个css类选择器，名子为left */ width:200px; /* 盒子模型宽度为200px*/ height:200px; /* 盒子模型高度为200px */ margin:10px; /* 盒子模型外边距为10px */ border:solid 1px; /* 盒子1像素的实线边框 */ float:left; /* 设置盒子向左浮动，脱离了文档流 */ .noleft /* 声明另
17、一个css类选择器，名子为noleft */ width:200px; /* 设置盒子模型的宽度为200px */ height:200px; /* 设置盒子模型的高度为200px */ border:solid 1px; /* 设置盒子有一个像素的实线边框 */ background:#ccc; /* 设置盒子模型背景为灰色 */ 框（一）框（一） 框（二）框（二） 框（三）框（三） .left /* 声明一个css类选择器，名子为left */ width:200px; /* 盒子模型的宽度为200px */ height:200px; /* 盒子模型的高度也为200px */ margi
18、n: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; /* 设置盒子模型两边都不能挨着浮动区块
19、*/ 框（一）框（一） 框（二）框（二） 框（三）框（三） 7. DIV+CSS7. DIV+CSS的兼容性问题的兼容性问题v1. 1. 不同浏览器解释盒子模型的差异不同浏览器解释盒子模型的差异v2. 2. 设置浏览器去遵循设置浏览器去遵循W3CW3C标准标准8 8、使用盒子模型设计页面布局、使用盒子模型设计页面布局 v8.1 8.1 区块居中设计区块居中设计v8.2 8.2 设置两列浮动的布局设置两列浮动的布局v8.3 8.3 设置三列浮动的布局设置三列浮动的布局v8.4 8.4 设置多列浮动的布局设置多列浮动的布局 居中居中设计 body /* 为网页主体内容区域设置样式 */ margi
20、n: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; /* 临时设置一下背
21、景颜色显示主容器布局效果 */ 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
22、 */ height:400px; /* 设定该区块框的高度为400px,临时设置 */ border:1px solid; /* 设定该区块框的边框为1px的直线边框 */ #right_content float:right; /* 设置该区块框向右浮动，脱离文档流 */ width:700px; /* 设定该区块框的宽度700px */ height:400px; /* 设定该区块框的高度400px,临时设置 */ border:1px solid; /* 设定该区块框的边框为1px的直线边框 */ 主主导航区航区块 内容区内容区块 设置三列浮置三列浮动 body margin:0; p
23、adding: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个像素 */ h
24、eight: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:
25、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; /*
26、 设置列表内边距为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; /* 也是向左浮动和菜
27、单项在一个文档流 */ width:1px; /* 只要一个像素的宽度 */ height:20px; /* 高度为20个像素 */ background:#888; /* 设置这个分隔条为深灰色 */ margin-top:5px; /* 设置上边距为5个像素，目的是垂直居中*/ 菜菜单（一）（一） 菜菜单（二）（二） 菜菜单（三）（三） 菜菜单（四）（四） 菜菜单（五）（五） 菜菜单（六）（六） 菜菜单（七）（七） 菜菜单（八）（八） 9. DIV+CSS9. DIV+CSS网站首页布局实例网站首页布局实例总总 结结v本章必须掌握的知识点：本章必须掌握的知识点：DIV+CSSDIV+CSS布局页面的优势布局页面的优势W3CW3C的盒子模型的声明的盒子模型的声明和布局有关的和布局有关的CSSCSS样式属性和值样式属性和值使用盒子区块的浮动布局使用盒子区块的浮动布局解决解决DIV+CSSDIV+CSS的兼容性问题的兼容性问题谢谢 谢谢
