CSS基础- 3.14 定位练习-弹出层

最新推荐文章于 2023-07-26 11:10:23 发布

夏赞恩

最新推荐文章于 2023-07-26 11:10:23 发布

阅读量1k

点赞数

分类专栏：前端学习文章标签： css html css3

本文链接：https://blog.csdn.net/qq_44714543/article/details/122328802

版权

前端学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

文章目录

弹出层效果图
HTML代码
CSS代码

弹出层效果图

弹出层的背景是半透明的蒙层
在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出层</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/弹出层.css">
</head>
<body>
    <!-- 导入背景图片 -->
    <div class="main">
        <img src="img/pomotodo.png" alt="">
    </div>
    <!-- 蒙层或者遮罩层 -->
    <div class="modal ">
        <div class="container">
            <div class="num ">
                <a class='select line' href="">账号</a>
                <a href="">账号安全</a>
                <a class='close' href="">X</a>
            </div>

            <div class="inf clearfix">
                <div class="name clearfix">
                    <span class="fix-name">名字</span>   
                    <span class="your-name">夏小水</span>
                    <div class="change-button">
                        <a href="">更换</a>
                    </div>
                </div>
                <div class="mail clearfix">
                    <span>邮箱</span>   
                    <span class="your-mail">193XXXXXXX@qq.com</span>
                    <div class="change-button">
                        <a href="">更换</a>
                        <a href="">验证</a>
                    </div>
                </div>
            </div>     
                
            <div class="update">
                <div>
                    <a class='button'href="">升级</a>
                </div>
            </div>       
            </div>                   
    </div>
</body>
</html>

CSS代码

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
/* 将背景图片铺满 */
.main img{
    width:100%;
    height: 100%;
}
.modal{
    position: fixed; /* 固定定位  */
    width:100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);    /* 将背景图片设置成半透明  */
}
.modal .container{
    width: 600px;
    height: 200px;
    background-color:#fff;
    border-radius: 3px;
    font-size: 10px;  
    /* 处于可视窗口的正中间 */
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto; 
}

.modal .container .num{
    height: 50px;
    line-height: 50px;
    position: relative;
    border-bottom: 1px solid #e3e4e5;  
}
.modal .container .num>a{
    margin: 0 50px 0 10px;
    color:#0881B3;
}
.modal .container .num .close{
    float: right;
    height: 20px;
    width: 20px;
    background-color:#0881B3;
    color: white;
    border-radius: 50%;    /* 宽或高的50% */
    line-height: 20px;
    text-align: center;   /* 文本居中 */
    /* 绝对定位调整关闭按钮的位置 */
    position: absolute;
    right: -10px;
    bottom: 38px;
    margin: 0 auto;

}
.modal .container  .num>a:hover{
    color:#e3e4e5;
}
.modal .container .num>a.select{
    color:inherit;
    box-sizing: border-box;
}

.modal .container .inf{
    padding-left: 10px;
    height: 100px; 
    border-bottom: 1px solid #e3e4e5; 
}
.modal .container .inf .name{
    height: 50px;
    line-height: 50px;
    position: relative;
}
.modal .container .inf .name .your-name{
    margin-left: 120px;
}
.modal .container .inf .name .change-button{
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 60px;
    left:300px;
    color: #999;
}
.modal .container .inf .mail{
    height: 50px;
    line-height: 50px;
    position: relative;
}

.modal .container .inf .mail .your-mail{
    margin-left: 120px;
    height: 50px;
    line-height: 50px;
}
.modal .container .inf .mail .change-button{
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 60px;
    left:300px;
    color: #999;
}
.modal .container .update{
    position:relative;
    height: 50px;
}
.modal .container .update .button{
    width: 60px;
    height: 30px;
    border: 1px solid #999;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: auto 10px;
}

夏赞恩

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS基础- 3.14 定位练习-弹出层

文章目录弹出层效果图HTML代码CSS代码弹出层效果图弹出层的背景是半透明的蒙层HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
复制链接

扫一扫