什么是DIV？
這個(gè)是網(wǎng)頁HTML的標(biāo)簽，通常我們?cè)贖TML代碼中使用DIV標(biāo)簽配合應(yīng)用CSS類布局網(wǎng)頁。
1、DIV是html其中一個(gè)常用標(biāo)簽，如span、table、h1等之類標(biāo)簽
2、在HTML中DIV標(biāo)簽我們用的最多，具有代表性
3、div配合css類，布局出網(wǎng)頁
什么是CSS？
CSS全稱為Cascading Style Sheets，中文翻譯為“層疊樣式表”，簡(jiǎn)稱CSS樣式表，所以稱之為層疊樣式表（Cascading Stylesheet）簡(jiǎn)稱CSS。在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。
DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（table）定位方式的區(qū)別，因?yàn)閄HTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用DIV+CSS的方式實(shí)現(xiàn)各種定位。 用div盒模型結(jié)構(gòu)給各部分內(nèi)容劃分到不同的區(qū)塊，然后用css來定義盒模型的位置、大小、邊框、內(nèi)外邊距、排列方式等。
在 DIV+CSS 布局中，DIV 承載的是內(nèi)容，而 CSS 承載的是樣式，即內(nèi)容和樣式的分離。雖然初次接觸 DIV+CSS 來布局會(huì)讓人覺得比較抽象，不同于傳統(tǒng) Table 布局的所見即所得，但不容置疑的是 DIV+CSS 布局給 Web 設(shè)計(jì)帶來了巨大的好處：
搜索引擎親和力：搜索引擎更新歡 DIV+CSS 布局的網(wǎng)頁，因?yàn)樗阉饕婵梢灾苯犹^ CSS 而抓取所需要的頁面的正文內(nèi)容。
重構(gòu)頁面的方便性：由于內(nèi)容與樣式分離，因此可以在不改動(dòng)內(nèi)容的前提下，可以很方便的頁面進(jìn)行重新改版設(shè)計(jì)。
div+css代碼實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上中下結(jié)構(gòu) DIVCSS5 在線演示</title>
<link href="images/style.css" rel="stylesheet" type="text/css" />
<!--
www.aushadhiyoga.com -->
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
css代碼：
@charset "utf-8";
body, div{margin:0; padding:0;font-style: normal;
font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif}
body{color:#000000;background:#FFF; text-align:center}
a{color:#000000;text-decoration:none}
a:hover{color:#BA2636;text-decoration:underline}
#header,#content,#footer{margin:0 auto;width:400px; height:100px}
/* 以上代碼設(shè)置三個(gè)共用樣式 */
#header{border:1px solid #F00}
#content{ border:1px solid #FF0; height:200px}
#footer{border:1px solid #00F}
div+css的視頻教程如下：
[flash]http://www.tudou.com/l/3-4LrPS3ImA/&bid=05&iid=201630473&rpid=98623514&resourceId=98623514_05_05_99/v.swf[/flash]