代码
<html>
<head>
<style type="text/css">
body
{
text-align:center; /*使它的子元素div居中*/
/*如果它的子元素不指定text-align的话，那么它的子元素的text-align属性值就会继承他的父元素的text-align属性值。在这里就是text-align为center*/
}
.a
{
border:1px solid #000099;
margin:20px;
width:900px;
height:700px;
margin-left:auto;/*这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。*/
margin-right:auto;
text-align:left;
}
.b
{
background-color:#99FF66;
width:600px;
height:500px;
position:relative; /*relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。*/
top:50px;
left:50px;
}
.c
{
background-color:#FF0099;
width:300px;
height:300px;
position:absolute;
/*
如果这里position设置为absolute，那么它的父元素的position要设置为relative,否则它的位置将会相对于body而言。
*/
top:20px;
left:20px;
}
</style>
</head>
<body>
<div class="a">
我是a
<div class="b">
我是b
<div class="c">
我是c
</div>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
body
{
text-align:center; /*使它的子元素div居中*/
/*如果它的子元素不指定text-align的话，那么它的子元素的text-align属性值就会继承他的父元素的text-align属性值。在这里就是text-align为center*/
}
.a
{
border:1px solid #000099;
margin:20px;
width:900px;
height:700px;
margin-left:auto;/*这句CSS居中的意思就是让div自己调整左右margin间隔的距离以达到水平居中的效果。*/
margin-right:auto;
text-align:left;
}
.b
{
background-color:#99FF66;
width:600px;
height:500px;
position:relative; /*relative是相对于自己来定位的，例如：#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。*/
top:50px;
left:50px;
}
.c
{
background-color:#FF0099;
width:300px;
height:300px;
position:absolute;
/*
如果这里position设置为absolute，那么它的父元素的position要设置为relative,否则它的位置将会相对于body而言。
*/
top:20px;
left:20px;
}
</style>
</head>
<body>
<div class="a">
我是a
<div class="b">
我是b
<div class="c">
我是c
</div>
</div>
</div>
</body>
</html>