第15章用CSS+DIV灵活布局页面讲述.pptVIP

教学内容：CSS＋Div是网站标准中常用的术语之一，CSS和Div的结构被越来越多的人采用，很多人都抛弃了表格而使用CSS来布局页面，它的好处很多，可以使结构简洁，定位更灵活，CSS布局的最终目的是搭建完善的页面架构。通常在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+Div的方式实现各种定位。 教学重点 初识DIV CSS定位与DIV布局 CSS+DIV布局的常用方法 使用CSS+DIV布局的典型模式 15.1初识DIV 在CSS布局的网页中，Div与Span都是常用的标记，利用这两个标记，加上CSS对其样式的控制，可以很方便地实现网页的布局。 15.1.1DIV概述 过去最常用的网页布局工具是table标签，它本是用来创建电子数据表的，由于table标签本来不是要用于布局的，因此设计师们不得不经常以各种不寻常的方式来使用这个标签——如把一个表格放在另一个表格的单元里面。这种方法的工作量很大，增加了大量额外的HTML代码，并使得后面要修改设计很难。 15.1.2CSS+DIV布局的优势 掌握基于CSS的网页布局方式，是实现Web标准的基础。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。 15.2 CSS定位与DIV布局 CSS对元素的定位包括相对定位和绝对定位，同时，还可以把相对定位和绝对定位结合起来，形成混合定位。 15.2.1盒子模型 如果想熟练掌握Div和CSS的布局方法，首先要对盒模型有足够的了解。盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正的布局网页中各个元素的位置。所有页面中的元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。 15.2.2元素的定位 float属性定义元素在哪个方向浮动。以往这个属性应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。float是相对定位的，会随着浏览器的大小和分辨率的变化而改变。float浮动属性是元素定位中非常重要的属性，常常通过对DIV元素应用float浮动来进行定位。 15.2.3position定位 position的原意为位置、状态、安置。在CSS布局中，position属性非常重要，很多特殊容器的定位必须用position来完成。position属性有4个值，分别是static、absolute、fixed、relative，static是默认值，代表无定位。 15.3 CSS+DIV布局的常用方法 无论使用表格还是CSS，网页布局都把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是div标签。CSS排版是一种很新的排版理念，首先要将页面使用div整体划分为几个板块，然后对各个板块进行CSS定位，最后在各个板块中添加相应的内容。 15.3.1使用DIV对页面整体规划 在利用CSS布局页面时，首先要有一个整体的规划，包括整个页面分成哪些模块，各个模块之间的父子关系等。以最简单的框架为例，页面由Banner、主体内容（content）、菜单导航（links）和脚注（footer）几个部分组成，各个部分分别用自己的id来标识。 15.3.2设计各块的位置 当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局类型，如是单栏、双栏还是三栏等。 15.3.3使用CSS定位 整理好页面的框架后，就可以利用CSS对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容。 15.4使用CSS+DIV布局的典型模式 现在一些比较知名的网页设计全部采用的DIV+CSS来排版布局，DIV+CSS的好处可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比表格强得多。下面介绍常见的布局类型。 15.4.1一列固定宽度 一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。下面举例说明一列固定宽度的布局方法。 15.4.2一列自适应 自适应布局是在网页设计中常见的一种布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活