蓝桥杯练习06给网页化个妆

给页面化个妆

介绍

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

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

其中：

·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

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>

CSS 复制代码

* {
    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：请补充代码*/

答案

css 复制代码

* {
    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项目将在垂直方向上居中对齐

这题想完成这个效果的方式还有很多，可以用绝对定位和相对定位来做，但要复杂一些页比较繁琐。