项目八 DIV基础

现在进行网页设计都流行使用div css的方法。前面已经对css做过简单的介绍，本章再来说一下div标签。

以前的网页设计都是采用table进行页面布局，那么采用div与table比起来有什么优点呢？首先，table不是一个标准的标签，从兼容性角度div兼容性更好；其次，div更加灵活，它使网页从设计的角度由平面变成了三维;第三点，使用div可以节省带宽。

教学目标

1. 了解DIV概念

2. 了解DIV布局的优点

3. 熟悉DIV常见属性

4. 了解盒子模型

实践目标

1、 理解和掌握DIV标签的用法

2、 能使用DIV CSS布局简单的网页

知识储备

课前预习

1、请简要回答以下问题：

1）DIV布局的优点有哪些？

2）DIV标签的基本用法有哪些？

3）如何理解CSS的盒子模型？

一、了解什么是DIV布局

1、DIV布局

HTML 源代码：

效果预览：

表格布局的代码最常见的是在HTML标签之间嵌入一些设计代码，如width=100%,border=0等。表格布局的混乱代码就是这样编写的，大量样式年设计代码混杂在表格，单元格中，使得可读性大大降低，维护起来成本也相当高，为解决这些，现在有了另外一种布局方法DIV布局。

Div全称division 意为”区分”使用DIV的方法跟使用其他tag的方法一样。

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用

是一样的。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码。

DIV可以理解成一个块，是有个比表格简单的元素，从语法上只有

这样简单的定义DIV最大的好处就是样式是由CSS来控制。DIV布局就是一种块布局模式。通常和CSS一起使用，在下一章中我们会对DIV CSS布局进行详细讲解。

二、DIV布局的优点

大大缩减页面代码，提高页面浏览速度,缩减带宽成本；

结构清晰，容易被搜索引擎搜索到，天生优化了seo（Search Engine Optimization）搜索引擎最佳化；

缩短改版时间，只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

1、使页面载入得更快

由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

2、降低流量费用

页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。

3、修改设计时更有效率

由于使用了DIV CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。

4、保持视觉的一致性

DIV CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。

5、更好地被搜索引擎收录

由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。

6、对浏览者和浏览器更具亲和力

我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

三、DIV标签的基本用法

1、ID属性

html源代码：

效果预览：

用途：

ID是设置标签的标识，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；ID属性用于定义一个元素的独特的样式。

说明：

ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头