【页面布局】给页面化个妆 蓝桥云课楼赛第31期（Web 前端挑战）

【页面布局】给页面化个妆

背景介绍

各个网站都拥有登录页面，设计一个界面美观的登录页面，会给用户带来视觉上的享受。本次试题我们要完成一个登录页面的布局。

考试要求

解答：

style.css：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-image: url('../images/background-pic.jpeg');
    background-size: cover;
    color: #fff;
    height: 945;
    width: 1920;
}
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.nav-bar img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 15px;
}

.content-container {
    display: flex;
    justify-content: center;
}

.content-container .content{
    text-align: center;
    height: 600px;
    width: 450px;
    background-color:rgba(0, 0, 0, .45);
    border-radius: 10px;
}
.content-container .content img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: relative;
    top: -75px;
}
.content-container .content .form h2{
    font-size: 45px;
    font-weight: 800;
    position: relative;
    top: -75px;
}
.content-container .content .form form .btns button {
    height: 30px;
    width: 80px;
    border-color: #041c32;
    background-color: #2d4263;
    font-size: 16px;
    color: white;
    margin-bottom: 10px;
}
.content-container .content .form form input {
    font-size: 20px;
    border-radius: 5px;
    width: 300px;
    height: 40px;
    text-align: center;
    margin-bottom: 20px;
}
.content-container .content .text a {
    color: white;
    text-decoration: none;
}

题目有多种实现方法，以上仅供参考。