手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >完全纯css实现div自适应居中兼容IE7 Chrome FireFox
完全纯css实现div自适应居中兼容IE7 Chrome FireFox
摘要:1.纯CSS,完全无需JS,对JS程序猿来说一种解放!2.IE7、8下rgba属性会失效,所以如果要做半透明要新加一个div,这个步骤我偷个...

1. 纯CSS,完全无需JS,对JS程序猿来说一种解放!

2. IE7、8 下rgba属性会失效,所以如果要做半透明要新加一个div,这个步骤我偷个懒就省了哈哈,重点是中间的div大笑

3. 对于弹出层,各位针对自己的情况设置z-index,这里我没有设置了

4. IE6没有测试,抱歉= =

DOM结构

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<p>

fdsfsdfsadfsdafsdafdssad

</p>

<div>

<table>

<tr>

<td>

<div>

<p>

感觉如何?

</p>

<input type="button" value="确定" />

</div>

</td>

</tr>

</table>

</div>

</body>

</html>

stye.css :

.pop-wrap{

position: fixed;

top: 0;

background: rgba(0, 0, 0, .8);

left: 0;

width: 100%;

height: 100%;

}

.pop-wrap table {

height: 100%;

width: 100%;

}

.pop-wrap td {

width: 100%;

height: 100%;

}

div.pop {

margin: 0 auto;

width: 200px;

background: #ECECEC;

padding: 20px;

text-align:center;

}

div.pop p {

font: 200 14px/20px Microsoft YaHei;

}

div.pop input {

background: #FFFFFF;

border: 1px solid #ADADAD;

padding: 3px 10px;

border-radius : 2px;

cursor: pointer;

}

【完全纯css实现div自适应居中兼容IE7 Chrome FireFox】相关文章:

CSS布局——左定宽度右自适应宽度并且等高布局

用css样式表实现首字大写

三列宽度自适应结构中的的DIV写法

CSS表单元素垂直居中完美解决方案

CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

任意图片实现垂直居中的三种方法(兼容性还不错)

CSS如何给一个绝对定位的元素设定自适应宽度

firefox中div+css的外层背景色不见的解决方法

css div实现的遮罩层完美兼容IE6-IE9 FireFox

CSS控制图片自适应Div大小

精品推荐
分类导航