现在的位置: 首页 > 综合 > 正文

DIV+css定位

2013年01月26日 ⁄ 综合 ⁄ 共 1830字 ⁄ 字号 评论关闭

请大家看看如下的定义及排出的结果:

 

代码

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<style>
#container 
{margin:0 auto; width:100%;background:#ff0000;}
#div1 
{ height:300px; width:100px; background:#9c6; margin-bottom:0px;}
#div2 
{ height:100px; width:100px; background:#0c6; margin-left:100px; margin-top:-300px;}

#div3 { height:50px; width:80px; background:#009c60;margin-left:100px; margin-top:}
#div4 
{ height:100px; width:100px; background:#00c600;margin-left:100px;  }

#div5 { height:100px; width:200px; background:#c6ff00;margin-left:200px; margin-top:-250px; }

#div6 { height:200px; width:100px; background:#ffc600;margin-left:100px;margin-top:150px;  }
#div8 
{ height:200px; width:100px; background:#ff00ff;margin-left:300px; margin-top:-350px;}
#div7 
{ height:200px; width:100px; background:#ffc600;margin-left:400px;margin-top:-300px;}

#header { height:100px; background:#9c6; margin-bottom:0px;}
#menu 
{ height:20px; background:#693; margin-bottom:0px;}
#mainContent 
{ background:url(bg.gif) 0 0 repeat-y; overflow:auto;zoom:1; margin-bottom:1px;}
#sidebar 
{ float:left; width:200px;background:#cf9; height:auto !important; height:100px;}
#content 
{ margin-left:205px !important; margin-left:202px; height:auto !important; height:100px; background:#ffa;}
#footer 
{ height:60px; background:#9c6;}
.clearfloat 
{ clear:both; height:0; font-size: 1px; line-height: 0px;}

</style>
</head>

<body>
<div id="container" >
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div8">div8</div>
<div id="div7">div7</div>

</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 379px; top: 245px" id="layer1">
 
</div>
</body>

</html>

 

 

 

 

   特别注意div1-8在container中出现的先后次序再对照定义,或许会有些感悟。

 

 

 

抱歉!评论已关闭.