给页面化个妆
介绍
各个网站都拥有登录页面，设计一个界面美观的登录页面，会给用户带来视觉上的享受。本题中我们要完成一个登录页面的布局。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
其中：
·css/style.css是需补充的样式文件。
·images是项目所用到的图片文件。
·index.html是登录页面。
在浏览器中预览index.html,当前页面效果如下：
目标
请完善css/style.css样式文件，让页面呈现如下所示的效果：
页面关键样式说明如下：
.表单外观样式：高为600px、宽为450px、背景颜色为rgba(0,0,0,.45)、圆角边框为
10pX。
·表单顶部的头像图片样式：宽和高均为200px、圆角50%。
·表单中的二级标题样式：字体大小为45px、字体粗细为800。
·表单中按钮样式：宽为80px、高为30px、边框颜色为041c32、背景颜色为非2d4263、字体大
小为16px、字体颜色为white。
·表单中输入框的样式：字体大小为20px、圆角边框为5px、宽度为300px。
也可以参考下图标注：
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>登录页面</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div class="nav-bar">
<p>返回</p>
</div>
<div class="content-container">
<div class="content">
<img src="./images/cat.png" />
<div class="form">
<h2>请登录</h2>
<form>
<input type="text" placeholder="用户名" />
<input type="password" placeholder="密码" />
<div class="btns">
<button type="submit">登录</button>
<button type="reset">重置</button>
</div>
</form>
<div class="text">
<a href="#">注册</a>
<span>|</span>
<a href="#">忘记密码</a>
</div>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: azure;
background-size: cover;
color: #fff;
height: 945;
width: 1920;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-bar p {
font-size: large;
color: cornflowerblue;
margin: 15px;
}
/*TODO：请补充代码*/
答案
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: azure;
background-size: cover;
color: #fff;
height: 945;
width: 1920;
}
.nav-bar {
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-bar p {
font-size: large;
color: cornflowerblue;
margin: 15px;
}
/*TODO：请补充代码*/
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.form {
height: 600px;
width: 450px;
background-color: rgba(0, 0, 0, .45);
border-radius: 10px;
text-align: center;
}
.content .form h2 {
font-size: 45px;
margin-top: 140px;
margin-bottom: 50px;
font-weight: 800;
}
.content .form input {
font-size: 20px;
border-radius: 5px;
width: 300px;
border: none;
text-align: center;
margin: 10px 0;
}
.content .form .btns button {
margin: 10px 0;
width: 80px;
height: 30px;
border-color: #041c32;
background-color: #2d4263;
font-size: 16px;
color: white;
}
.content img {
position: absolute;
width: 200px;
height: 200px;
z-index: 1;
border-radius: 50%;
top: 0%;
}
.text a {
color: white;
text-decoration: none;
font-size: 16px;
}
知识点
大部分代码更上面来就行这里选择的是flex布局，这两句关键代码
display: flex;
flex-direction: column;
align-items: center;
display: flex;：将元素的显示模式设置为Flex布局，使其成为一个Flex容器。这意味着容器内的子元素（称为Flex项目）将根据Flex布局规则排列。 flex-direction: column;：定义Flex项目的排列方向为垂直方向。这意味着Flex项目会从上至下堆叠排列，而不是默认的从左至右水平排列。 align-items: center;：在Flex容器的交叉轴（在flex-direction: column;的情况下是垂直方向）上对齐Flex项目。设置为 center 表示所有的Flex项目将在垂直方向上居中对齐
这题想完成这个效果的方式还有很多，可以用绝对定位和相对定位来做，但要复杂一些页比较繁琐。
