现在进行网页设计都流行使用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的盒子模型？

1、DIV布局

HTML 源代码：

效果预览：

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

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

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用<P></P>是一样的。

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

DIV可以理解成一个块，是有个比表格简单的元素，从语法上只有<div></div>这样简单的定义DIV最大的好处就是样式是由CSS来控制。DIV布局就是一种块布局模式。通常和CSS一起使用，在下一章中我们会对DIV+CSS布局进行详细讲解。

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

结构清晰，容易被搜索引擎搜索到，天生优化了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富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

1、ID属性

html源代码：

效果预览：

用途：

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

说明：

ID，通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头< masthead>，一个内容区域和一个页脚等组成），一般使用ID比较理想，因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。

ID在一个页面中仅能被使用一次。注意定义高级ID时,需要以“#”号开头,后面跟目区域的ID号,后面跟需要的标签例如,p、h1等。

2、Class属性

HTML源代码：

效果预览：

用途：class是设置标签的类，class属性用于指定元素属于何种样式的类。class是一个样式，可以套在任何结构和内容上，就象一件衣服；

说明：一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个Class可以定义剧本中每个人物的故事线，你可以通过CSS，Javascript 等来使用这个类。因此你可以在一个页面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。

id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

3、绝对定位(positon-absolute)

用途：Position-absolute和指定距离的属性可以把所指定的标签放置在绝对位置上。

说明： 指定之后，指定的部分就将不摆放在通常的位置，因此对其他标签的放置没有任何影响。

语法：

HTML源代码;

效果预览：

4、相对定位(position:relative)

用途;Position:relative和指定距离的属性可以把指定的标签从本来应该显示的位置移动到一个相对位置。

说明： 其后的标签和指定标签应在的位置应该相同放置。

语法;

HTML源代码：

常用属性;

效果预览：

Div平铺是页面排版布局中使用最多的方法。它是从平面（2D）的层面上对页面进行排版布的，就如同拼图一样，它就是一块接着一块将页面铺满。

本章中所说的布局，不是平面设计中的如何布置页面中的各项内容，而是指如何将页面中的各个内容按照设计图的设计组装成HTML文档。

在介绍Div平铺的知识点之前，先来了解下Div平铺必备的基础CSS盒子模型。

用CSS来排版网页，也就是常听的用DIV来编排你的网页结构，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

理解CSS盒子模型

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

内容（CONTENT）就是盒子里装的东西；

而填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

边框(BORDER)就是盒子本身了；至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子每个HTML标记都可看作一个盒子。

HTML源代码：

CSS 外边距属性（Margin）：

效果预览：

小结：

TABLE编写的网页，可以说它是不标准的！table层层嵌套，繁琐，修改起来麻烦，从w3c网页标准来看，table真正的目的是用来显示数据的，而不是用来布局的。div布局的好处是它符合了w3c网页标准，div是真正用来布局网页的。DIV+CSS布局是目前最流行的网页布局方式，使用这种布局方式不仅可以制作出更为丰富多彩的网页效果，使得网页的排版形式更为灵活，同时也减轻了代码冗余，更方便后期网站的收录。

在上一章节中我们用TABLE+CSS制作了《互联世纪网》，但是在实际运用中，绝大多数的网页都是用DIV+CSS进行制作。这样的网页排版起来比table更为灵活方便，也便于后期的管理和维护。通过前面对DIV的基本学习，接下来我们就用DIV+CSS重新制作出《互联世纪网》。

任务描述：

1. 运用DIV+CSS制作《互联世纪网》，效果如下图：

实践目标：

1. 熟悉DIV属性

2. 熟练运用DIV+CSS制作网页

参考代码：

HTML 源代码:

本章介绍了DIV布局基础，其中盒子模型是CSS控制页面的基础，学习完本章以后，同学们应该能够清楚地理解盒子的含义，盒子的组成。本章的重点和难点在于DIV标签的基本用法以及内部元素和盒子模型。它们对于复杂页面的排版至关重要，因此在课后要多加练习，才能熟练掌握DIV。为后面制作出更加优美的页面打好基础。