前言

相信正在学习前端页面开发的你，肯定会对自己常常浏览的页面感兴趣，思考这么优美的界面是怎么做的。在这篇文章中，我们将穿越代码的迷雾，揭开网易云登录界面开发的神秘面纱，深入了解那些构建我们数字生活的精妙设计和技术奇迹。

------那么废话不多说：直接上效果图：

思路+实现

------先设计结构，再去写样式

1. HTML结构

那么我们在书写界面时，最应该注意的是页面的结构划分，把一个页面比作人，就要分得清他的头，身子吧。所以上述页面我们在html 中可以分为两部分来写，也就是两个<div>。当然，整个身体也是一个<div>，所以外部还要套一个<div>。

那么我们在书写过程中也要用正确的命名规范，最外部是<div class="login">,内部的头部和身子则为<div class="login__head">和<div class="login__bd">。

然后我们就可以先去设计头部：头部有三个元素，左箭头、网易云logo、标题 ，每个元素都用一个<div>装。对应代码就是：

ini 复制代码

        <div class="login__head">
            <div class="back">
                <i class="iconfont icon-zuojiantou"></i>
            </div>
            <div class="title">
                <i class="iconfont icon-wangyiyunyinle"></i>
            </div>
            <div class="text">网易云音乐</div>
        </div>

最后我们来看身子部分，由效果图可知，身子由两个input框、一个按钮和一个a标签构成，且各占一行，所以分别用四个<div>包裹。当然我们input框里面要有提示信息，但是要注意这里不用value，因为要实现用户输入信息时提示语自动消失的效果，所以用placeholder属性。

那么对应的代码就是：

ini 复制代码

        <div class="login__bd">
            <div class="email">
                <input type="text" placeholder="登录邮箱" class="ema" id="username">
            </div>
            <div class="password">
                <input type="password" placeholder="密码" class="pw" id="password">
            </div>
            <div class="submit">
                <button type="button" class="sub" id="btn" >登录</button>
            </div>
            <div class="reset">
                <a href="#" class="res">重设密码</a>
            </div>
        </div>

2. CSS样式

css 复制代码

* {
    margin: 0;
    padding: 0;
}

.login__head {
    margin-top: 60px;
    position: relative;
    height: 50px;
    overflow: auto;
}
.back {
    position: absolute;
    margin-left: 10px;
}
.title {
    position: absolute; 
    left:140px;
    color: red;
}
.text  {
    position: absolute;
    left: 160px;
}

.login__bd {
    position: relative;
    margin-top: 70px;
    height: 300px;
}
.popbox {
    display: none;
    width: 110px;
    height: 110px;
    border-radius: 15px;
    position: absolute;
    left: 130px;
    top: 50px;
    background-color: #4c4c4c;
}
.popbox-text{
    position: absolute;
    left: 28px;
    top: 60px;
    color: #ededed;
}
.icon-gou {
    position: absolute;
    left: 47px;
    top: 30px;
    color: #ededed;
}

.email {
    text-align: center;
    
}
.ema {
    border : 0;
    padding: 0 12px;
    border-radius: 10px;
    background-color: #f2f3f5;
    width: 200px;
    height: 55px;
}
.password {
    text-align: center;
    margin-top: 15px;
}
.pw {
    padding: 0 12px;
    border : 0;
    border-radius: 10px;
    background-color: #f2f3f5;
    width: 200px;
    height: 55px;
}

.submit {
    text-align: center;
    margin-top: 30px;
}
.sub {
    border : 0;
    border-radius: 20px;
    background-color: #ffc5c4;
    color: #fff;
    width: 220px;
    height: 40px;
}
.reset {
    text-align: center;
    margin-top: 20px;
    
}
.res {
    text-decoration: none;
    font-size: 11px;
    color: #2b6eae;
    font-weight: bold;
}

解释如下：

* {...} :先设置全局内边距和外边距为0。

.login__head{...}：头部盒子设置为相对定位，并设置其大小，距离外部盒子顶部60px。

.back{...}、.title{...}、.text{...}：均设置为绝对定位，左箭头距离外部盒子左部10px，网易云logo和标题通过定位居中

.login__bd{...}：身子盒子设置为相对定位，并设置其大小，距离头部盒子底部70px。

.email{...}、.password{...}、.submit{...}、.reset{...}：均设置为水平居中。并通过margin-top 调整相对距离。

.ema{...}、.pw{...}：两个input框先设置合适大小，无边框，背景颜色均设置为 #f2f3f5。并设置两者的边框圆角为10px。通过padding设置框内提示信息与外边框的距离。

.sub{...}：先设置登录按钮的大小，无边框，背景颜色为#ffc5c4。边框圆角为20px，并设置提示信息颜色为#fff。

.res{...}：设置a标签无下划线，字体大小为11px，字体颜色为#2b6eae，字体为粗体。

优化

在页面整体的样式设计成功后，我们也要思考一些优化的实现。这里可以设计一个弹出窗，点击登录后立即弹出，点击弹出窗外部任意处弹出窗会消失。

这里要用js实现这一动态效果，我们先分析分析：

弹出窗无非就是一个大盒子里面嵌套一些小盒子，且弹出窗是放在身子（login__bd）这个盒子里的,所以新增一些结构：

xml 复制代码

    <div class="login__bd">
            <!-- 弹出框 -->
            <div class="popbox" id="popbox">
                <i class="iconfont icon-gou"></i>
                <div class="popbox-text">已完成</div>
            </div>
            
            ......
    </div>

那么我们可以得知弹出窗初始是消失的，只有当我们点击登录这个按钮后才会出现。那么我们设计弹出窗的样式时，一定要写display: none; 那么对应的代码如下：

css 复制代码

.popbox {
    display: none;
    width: 110px;
    height: 110px;
    border-radius: 15px;
    position: absolute;
    left: 130px;
    top: 50px;
    background-color: #4c4c4c;
}
.popbox-text{
    position: absolute;
    left: 28px;
    top: 60px;
    color: #ededed;
}
.icon-gou {
    position: absolute;
    left: 47px;
    top: 30px;
    color: #ededed;
}

把弹出框的面貌实现后，就可以开始做动态效果了。我们可以得知，弹出窗初始是消失的，点击登录按钮后会出现 。所以我们可以先M中的getElementById方法来获取相应id的html元素，再通过事件监听方法addEventListener()去监听登录按钮被点击（click）的事件，一旦被点击，则执行 popbox.style.display = 'block';弹出窗出现。

最后就是设计点击弹出窗外部任意处弹出窗会消失的效果。所以要对body监听点击事件，一旦点击则 popbox.style.display = 'block'; 这里要注意，登录按钮也是body的一部分，为防止body监听事件触发。要使用stopPropagation()方法来阻止它触发。所以我们也很容易得知：监听popbox点击事件的内部也要用stopPropagation()方法来阻止触发。

那么以下就是实现动态效果的代码：

xml 复制代码

<script>
        let btn = document.getElementById('btn');//获取登录按钮元素
        
        let popbox = document.getElementById('popbox');//获取弹出窗元素
        
        let bd = document.body; //获取body元素
        
        //出现弹窗后，点击body，div消失
        bd.addEventListener('click', ()=>{
                popbox.style.display = 'none';
        })
        popbox.addEventListener('click', (e)=>{
            //出现弹窗后，点击div，阻止body的div消失的事件
            e.stopPropagation();
        })
        btn.addEventListener('click', (e)=> {
            //阻止点击body时div消失事件
            e.stopPropagation();
            //弹出窗
            popbox.style.display = 'block';
        })
</script>

最后

那么相信你现在也很想完成这个优美的界面吧！请赶快去试试吧！

有任何想法和建议欢迎大家在评论区留言哦~

文中所用素材（左箭头、网易云logo）出自：阿里巴巴矢量图标库（https://www.iconfont.cn/）

点个免费的赞鼓励支持一下吧！个人Gitee仓库：Code Space: 记录学习code中的点点滴滴 (gitee.com)

前端开发—网易云登录界面（移动端）

前言

思路+实现

1. HTML结构

2. CSS样式

优化

最后