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>

时间: 2024-10-07 05:07:59

div的覆盖,居中的相关文章

div块上下左右居中

实现div块的上下左右居中: <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>div块上下左右居中</title> </head> <body>     <div id="div2">     </div>     <style>     *{p

常用布局,div竖直居中

常用两列布局,多列布局和div竖直居中 body { margin: 0; padding: 0; } .w200 { width: 200px; } .mar-left200 { margin-left: 200px; } .red { background-color: red; } .middle { vertical-align: middle; } .block { width: 80%; height: 300px; border: 1px solid #eee; margin: 0

DIV CSS固定宽度居中实例

DIV CSS固定宽度居中布局实例 在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点. DIV布局水平居中,关键使用CSS单词为margin:0 auto.解释:DIV对象外边距左右为自动适应距离(根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中),上下间距为0px. 关键实例CSS代码: body{ text-align:center} .box{ margin:0 a

div中图片居中

<html> <head> <style> .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-

css图片在div内上下居中的方法

参考代码:< div style=”width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>< img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression(( 300 - this.height ) / 2);” /&g

div元素上下左右居中

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>div元素上下左右居中</title> 6 <style type=

DIV的绝对居中

来源:http://www.cnblogs.com/damonlan/archive/2012/04/28/2473525.html 作者:浪迹天涯 很多时候,我们需要在浏览器中让一个div居中进行显示,而不会受到滚动条的影响,那怎么才能得到效果?其实,很简单,你需要理解下面这段就可以了. 最前端开人郁闷的就是浏览器的兼容性问题,所以在下面的代码中通过各浏览器的特有属性,来进行判断浏览器的类型. 比如说,self.pageYOffset 如果它为true的话,那么它说明在IE9中起作用,也说明了

css 宽高自适应的div 元素 如何居中 垂直居中

在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class="wrap">//此处为父组件 我们会设置父级的宽高并让其居中 <div class="center">//子组件我们要实现它的垂直居中 不设置他的宽高 宽高 都由下面的img引入的图片撑开 <img width="100px" src

html基础 img标记 设置图片的宽度和边框 利用div使图片居中显示

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=ut