Html之【DIV】综合技巧大全（持续更新中...）
一、DIV左右居中
#center{ background:url(images/zy_01.gif) center top no-repeat; height:470px; width:800px; margin:0 auto; }/*居中*/二、几种常见的DIV边框样式
border: solid 3px blue;
width: 450px;
height: 150px;
overflow: scroll;
scrollbar-face-color: #ffd700;
<html><head><title>边框样式</title> </head><body> <p style=border-style:none>无边框</p> <p style=border-style:dotted>点线式边框</p> <p style=border-style:dashed>破折线式边框</p> <p style=border-style:solid>直线式边框</p> <p style=border-style:double>双线式边框</p> <p style=border-style:groove>槽线式边框</p> <p style=border-style:ridge>脊线式边框</p> <p style=border-style:inset>内嵌效果的边框</p> <p style=border-style:outset>突起效果的边框</p></body></html>
三、两种方式让DIV上下左右都居中
第一种：全CSS控制，层漂浮（适用于做登陆页面）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" ><head><title>居中Demo</title></head><mce:style type="text/css" title="currentStyle" media="screen"><!--#divcenter{ position:absolute;/*层漂浮*/ top:50%; left:50%; width:300px; height:300px; margin-top:-150px;/*注意这里必须是DIV高度的一半*/ margin-left:-150px;/*这里是DIV宽度的一半*/ background:yellow; border:1px solid red;}--></mce:style><style type="text/css" title="currentStyle" media="screen" mce_bogus="1">#divcenter{ position:absolute;/*层漂浮*/ top:50%; left:50%; width:300px; height:300px; margin-top:-150px;/*注意这里必须是DIV高度的一半*/ margin-left:-150px;/*这里是DIV宽度的一半*/ background:yellow; border:1px solid red;}</style></head><body><div id="divcenter">this is a test</div></body></html>第二种：JS + CSS控制，不漂浮（适用于做登陆页面）
<html><head> <title>DIV居中演示</title><mce:script type="text/javascript"><!-- function cen(){ var divname = document.all("testdiv");//居中高度等于页面内容高度减去DIV的高度 除以2var topvalue = (document.body.clientHeight - divname.clientHeight)/2;divname.style.marginTop = topvalue;}//页面大小发生变化时触发window.onresize = cen;// --></mce:script></head><body style="height:100%; width:100%; text-align:center;" onload=cen()><div id = "testdiv" name="testdiv" style="margin:0 auto; border:1px solid red; height:400px; width:400px;">DIV居中演示</body></html>第三种：不浮动DIV的情况下居中
<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div>
四、
五、
六、
七、
八、