6.使用定位，制作弹出框界面
程序员文章站
2022-03-10 20:35:32
使用定位，制作弹出框界面：
使用定位，制作弹出框界面：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<!-- reset.css文件内容参考：https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
<link rel="stylesheet" href="./reset.css">
<style>
img{
width:500px;
height:500px;
}
/* 遮罩层，半透明 */
.container .main{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color: rgba(0,0,0,.5);
}
/* 设置弹出层样式 */
.container .main .login{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:500px;
height:500px;
background-color: #fff;
border-radius: 5px;
padding:20px;
}
/* 设置关闭样式 */
.container .main .login .close{
width:20px;
height:20px;
box-sizing: border-box;
border-radius: 50%;
background-color: rgba(255,255,255,.5);
color:#999;
text-align: center;
line-height: 20px;
font-size:18px;
position:absolute;
top:0;
right:0;
}
</style>
</head>
<body>
<div class="container">
<img src="http://i-1-33app.qqxzb-img.com/2019/11/15/6fd81ae2-4e85-43da-b5bd-e810cd54c82c.jpg?imageview2/2/q/85" alt="">
<div class="main">
<div class="login">
lorem ipsum dolor sit amet consectetur adipisicing elit. debitis consectetur laboriosam maiores sequi deleniti nihil cumque repellendus ea, harum a, vero voluptatum dicta dolorem blanditiis, accusamus saepe fugit cum vel?
<div class="close">
x
</div>
</div>
</div>
</div>
</body>
</html>
效果展示：