Html之【DIV】综合技能大全（持续更新中.）-HTML教程-爱易网页

Html之【DIV】综合技能大全（持续更新中.）

日期：2014-05-17　浏览次数：21174 次

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的高度 除以2
var 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>

四、

五、

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Html之【DIV】综合技能大全（持续更新中.）

相关资料更多>

推荐阅读更多>