给页面化个妆
介绍
各个网站都拥有登录页面，设计一个界面美观的登录页面，会给用户带来视觉上的享受。本题中我们要完成一个登录页面的布局。
准备
开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
其中：
·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项目将在垂直方向上居中对齐
这题想完成这个效果的方式还有很多，可以用绝对定位和相对定位来做，但要复杂一些页比较繁琐。
![每日一题 --- 移除链表元素[力扣][Go]](https://img-blog.csdnimg.cn/direct/afe0911681234b8b949fc47a9c182aee.png)
![[密码学] 密码学基础](https://img-blog.csdnimg.cn/direct/5e3bbec0c02a41f4adb7735597225b4f.png)
