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规范页面的结构：

 

　　5、XHTML基本规范

 

　　标签名和属性名称必须小写

 

　　HTML标签必须关闭

 

　　属性值必须用引号括起来

 

　　标签必须正确嵌套

 

　　文档必须拥有一个根元素，所有的XHTML元素必须嵌套于根元素中

 

　　属性不能简写，如：

 

　　6、页面开发需要注意的地方：

 

　　不要使用淘汰的标签：、、等，可参考官方文档（

 

　　< 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;

 

　　}

 

　　12、案例的首页布局分析

 

　　只保留DIV的布局分析：