HTMLCSSDIV实现整体布局.docxVIP

?HTML CSS + DIV实现整体布局1、技术目标：开发符合W3C标准的Web页面理解盒子模型实现DIV+CSS整体布局2、什么是W3C标准？ W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护Web行业标准 W3C标准包括一系列的标准：HTML内容方面：XHTML样式美化方面：CSS?结构文档访问方面：DOM页面交互方面：ECMAScript……等等3、W3C倡导的Web结构要符合以下要求：XHTML负责内容组织CSS负责页面样式4、符合W3C规范页面的结构：?Html代码??!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN?/TR/xhtml1/DTD/xhtml1-transitional.dtd??html?xmlns=/1999/xhtml??head??metahttp-equiv=Content-Typecontent=text/html;??charset=gb2312/??title无标题文档/title??/head??body? ......页面内容部分??/body??/html?[html]?view plaincopy!DOCTYPE?html?PUBLIC?-//W3C//DTD?XHTML?1.0?Transitional//EN???/TR/xhtml1/DTD/xhtml1-transitional.dtd??html?xmlns=/1999/xhtml??head??meta?http-equiv=Content-Type?content=text/html;???charset=gb2312?/??title无标题文档/title??/head??body??......页面内容部分??/body??/html?5、XHTML基本规范标签名和属性名称必须小写HTML标签必须关闭属性值必须用引号括起来标签必须正确嵌套文档必须拥有一个根元素，所有的XHTML元素必须嵌套于html根元素中属性不能简写，如： input checked=checked / input readonly=readonly / option selected=selected /6、页面开发需要注意的地方：不要使用淘汰的标签：b、font、marquee等，可参考官方文档() img /标签的alt属性：为图片增加alt属性样式和内容分离：将样式和结构分离，不使用行类样式表单的name和id：表单及表单元素要求设置name和id属性使用CSS + DIV布局页面的浏览器兼容性7、为什么需要盒子模型？ 网页可以看成由一个个盒子组成，如图：? 由上图可以看出，页面分为上(网站导航)、中、下(版权声明)三个部分， 中间部分又分为左(商品分类)、中(主要部分)、右，这些版块就像一个个 的盒子，这些盒子中放置着各种内容，页面就是由这些盒子拼凑起来8、盒子模型的相关属性margin（外边距/边界）border（边框）padding（内边距/填充 ） 我们看图理解一下各属性作用：? 以上属性又分为上、右、下、左四个方向??问题：页面元素的宽度width、高度height如何计算？ 答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度 比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度9、盒模型的层次关系 我们通过一个经典的盒模型3D立体结构图来理解，如图：??从上往下看，层次关系如下： 第1层：盒子的边框(border)， 第2层：元素的内容(content)、内边距(padding) 第3层：背景图(background-image) 第4层：背景色(background-color) 第5层：盒子的外边距(margin) 从这个层次关系中可以看出，当同时设置背景图和背景色时，背景 图将在背景色的上方显示10、margin外边距? 可统一设置或四边分开设置，如图：?? 具体的设置可查看CSS帮助文档(页面下方提供下载)11、水平居中和垂直居中 水平居中包含两种情况：?块级元素的水平居中：margin:0px auto; 文字内容的水平居中：text-align: center;? 垂直居中： 常见的单行文字的垂直居中可设置文字所在行的height与 行高样式属性一致，比如： div{ width: 400px; height: 400px; line-height: 400px;/*行高与div高度一致*/ }12、案例的首页布局分析? 只保留DIV的布局分析：?13、首页布局CSS + DIV代码分析?HTML结构代码： div id=contai