div 都做成单独的html,HTML <div> 标签

定义和用法：

可定义文档中的分区或节(division/section)。

标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记

，那么该标签的作用会变得更加有效。

用法：

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用额外的样式。

不必为每一个

都加上类或 id，虽然这样做也有一定的好处。

可以对同一个

元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素)，而 id 用于标识单独的唯一的元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，div 元素的 "align" 属性不被赞成使用。

在 XHTML 1.0 Strict DTD 中，div 元素的 "align" 属性不被支持。

HTML 4.01 与 HTML 5 之间的差异

HTML 4.01 中的 "align" 是不赞成使用的，在 HTML 5 中不支持该属性。

提示和注释：

注释：

是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

提示：请使用

元素来组合块级元素，这样就可以使用样式对它们进行格式化。

div的属性

主要设置如下：

overflow(溢出控制)：visible(默认，可见)、auto(自动)、scroll(显示滚动条)；

width(宽度)：数值；

height(高度)：数值；

color(字体颜色)：色彩代码；

font-size(字体大小)：数值；

line-height(行高)：数值；

border(边框)：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；

font-weight(字体粗细)：normal、bold、bolder、lighter；

font-family(字体类型)：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；

background(背景颜色)：色彩代码；

scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar -darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar -3dlight-color,scrollbar-arrow-color(滚动条各部分的颜色)：色彩代码；

filter:chroma(COLOR=转换成透明的颜色)(chroma过滤器)：色彩代码，该颜色将转换成透明效果；

word-break(断字)：normal(默认，正常断字)、keep-all(严格不断字)、break-all(严格断字)；

direction(文字方向)：ltr(默认，从左向右)、rtl(从右向左)。

HTML中的Div分区属性

基本属性：width, height, left, top, background-color(当设置为transparent时表示透明)

2、定位属性：position: absolute/relative

absolute时，位置固定；relative时，位置会随着内容的实际情况进行浮动

3、显示属性：display: block/none

block为默认状态，表示显示；none为隐藏

4、优先属性：z-index:n

n表示一个整数(正负均可)，有多个Div时n越大，则越靠前显示；

z-index可以理解为z轴的坐标(x,y轴控制左右、上下方位，z轴控制层叠div的前后方位)

只有用绝对定位(position:absolute)时，属性z-index才起作用；

未设置绝对定位(position:absolute)的div，其z-index永远为0；

未设定优先属性(z-index)的div，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个Div属于父子关系，则子div覆盖父div；

5、透明属性：opacity:0.3;(firefox专用)；filter:alpha(opacity=30)(IE专用)

两者一起用的时候就将两种主流浏览器都兼容了；上面例子是将Div的透明度设置为30％，可以看出两者的设置稍有不同；Div的文本与背景色均能被透明化！

如何让DIV标签居中显示？

在经典论坛上面搜了些老贴子看，大都说的是用text-align:center加在BODY中，然后DIV标签相对于BODY而居中对齐。这样有个缺点就是文章中所有的对象都会居中对齐(包括文字、图像等)，这样文档中要靠左的对象就需要另加代码，这方法不行。

而如果直接加上：200PX;margin:0 atuo;，这样的话只是在FireFox浏览器中会居中对齐，而IE里面就不行。

搞了大半天，问题又回到标准上来了，在学习网页标准的时候，首先就是了解DOCTYPE的设置，因为这是至关重要的。

而DIV居中的问题所在，就是你的DOCTYPE部份：

程序代码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

当你加入这句声明以后：

程序代码

.div-1{

200px;

margin:0 auto;

}

tops:

margin属性用于控制对象的上/右/下/左4个方向的外边距,使用两个参数时,第一个参数表示为上下边距,第二个参数表示为左右边距.除了直接使用数值外,margin还支持一个值叫auto,auto值是让浏览器自动判断边距.

这样的语句在IE和FF浏览器中都可以让DIV居中。

呵呵，开始搞了半天，甚至想用论坛上说的JS方法，后来找到一个贴子，才搞懂原来是DOCTYPE的问题。

PS：而有些朋友在做某些网页的时候，是不能加这句声明的，嘿，这时候就只能用文章开头所说的在BODY中加入text-align:center的方法了。

如何隐藏div标签

document.getElementById("DIV的ID").style.display="none";//隐藏

document.getElementById("DIV的ID").style.display="block";//显示

点击div实现a标签的跳转效果

下面是一个div

window.onload = function(){var obj = document.getElementById('ttt');

obj.οnclick=function(){

window.location.href="跳转的地址";

}

}