|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>凯哥学堂小例题</title>
</head>
<style type="text/css">
/*此样式设置的全频透明div*/
div {
position: absolute;
z-index: 1;
width: 100%;/*按body的可用宽度 按%比的好处就是可以随着窗口大小而改变 */
height: 100%;/*按body的可用高度*/
left: 0%;
top: 0%;
background-color: #000000;
opacity: 0.3;
}
div div{
position: absolute;
width: 300px;
height: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/*这里的作用很大
主要就是设置好DIV后 会按照50% 50%方式坐标设置
这样就忘记减去div的高度和宽度了
显示的效果就没有在中间
应该平移窗口的-50% 相当于宽度或高度除以2*/
background-color: white;
opacity: 1;
}
div div p{
line-height: 200px;
text-align: center;
color: red;
opacity: 1;
font-size: 50px;
}
</style>
body>
<div>
<div>
<p>凯哥学堂</p>
</div>
</div>
</body>
</html> |
|
发表于 2017-8-24 19:33:52
收藏
湘公网安备 43102102000065号