div的覆盖,居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--div的覆盖,居中,与嵌套-->
<style type="text/css">
#apDiv1 {
 position: absolute;/*div1的绝对位置*/
 width:100%;/*长度为100%*/
 left:0px;/*在HTML中距离左面的距离*/
 top:0px;/*在HTML中距离上面的距离*/
 height: 25px;/*高度*/
 z-index:1;/*div的纵轴,不再同一个div中,如果后面的数字比1大,大的那个div排在页面上面*/
 background-color:#F00;/*背景的颜色*/
 color:#FFF;/*字体的颜色*/
}
#apDiv2 {
 position: absolute;
 left:0px;
 top: 25px;/*在HTML中距离上边的距离,这为div1的高度*/
 width: 100%;
 height: 60px;
 z-index: 1;
 background-color:#0F0;
}
#apDiv3 {
 position: absolute;
 left:0px;
 top: 85px;/*在HTML中距离上边的距离,这为div1和div2的高度*/
 width:100%;
 height: 20px;
 z-index: 1;
 background-color:#FF0;
}
#apDiv4 {
 float:right;/*div4在div1中为靠右对齐*/
 height:19px;/*div4的高度*/
 padding:0px;/*声明中设置所有内边距属性*/
 color:#fff; /*div4的字体颜色*/
 z-index:1;
 margin-top:0px;
}
/*div5在div6中*/
#apDiv5 {
 margin:auto;/*div5的位置居中*/
 width: 980px;
 height: 400px;
 z-index: 1;
 background-color:#000;/*div5的颜色*/
}
#apDiv6 {
 position: absolute;/*div6的绝对位置*/
 left: 0px;
 top: 25px;
 width: 100%;
 height: 100%;
 z-index: 2;
}
</style>
</head>

<body>
<div id="apDiv1"><a>设为首页</a>|<a>加入收藏</a> |<a>联系我们</a><div id="apDiv4">连接网址:www.baidu.com</div></div>
<div id="apDiv2">第二行</div>
<div id="apDiv3">第三行</div>

<div id="apDiv6"><div id="apDiv5"></div></div>

</body>
</html>

posted @ 2015-01-09 11:43  巽坤  阅读(343)  评论(0编辑  收藏  举报