完全纯css实现div自适应居中兼容IE7 Chrome FireFox
完全纯css实现div自适应居中兼容IE7 Chrome FireFox
发布时间:2016-12-27 来源:查字典编辑
摘要: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;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类