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

背景介绍

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

准备步骤

在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

1
wget https://labfile.oss.aliyuncs.com/courses/7835/exam01-imi.zip && unzip exam01-imi.zip && mv exam01-imi/* ./ && rm -rf exam01-imi*

下载完成之后的目录结构如下：

1
2
3
4
5
6
7
├── css
│   └── style.css
├── images
│   ├── background-pic.jpeg
│   ├── cat.png
│   └── icon.png
└── index.html

其中：

  • css/style.css 是本次挑战需补充的样式文件。
  • images 是项目所用到的图片文件。
  • index.html 是登录页面。
  1. 下载源码。
  2. 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
  3. 打开环境右侧的【Web 服务】，就可以在浏览器中看到未完成的登录页面布局。

图片描述

考试要求

请完善 css/style.css 样式文件，让登录页面呈现如下所示的效果：

图片描述

页面关键样式说明如下：

  • 表单外观样式：高为 600px、宽为 450px、背景颜色为 rgba(0, 0, 0, .45)、圆角边框为 10px。
  • 表单顶部的头像图片样式：宽和高均为 200px、圆角 50%。
  • 表单中的二级标题样式：字体大小为 45px、字体粗细为 800。
  • 表单中按钮样式：宽为 80px、高为 30px、边框颜色为 #041c32、背景颜色为 #2d4263、字体大小为 16px、字体颜色为 white。
  • 表单中输入框的样式：字体大小为 20px、圆角边框为 5px、宽度为 300px。

要求规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

总通过次数: 2602 | 总提交次数: 2626 | 通过率: 99.1%

难度: 简单 标签: 2022, 省模拟赛, Web 前端, HTML5, CSS3

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background-image: url('../images/background-pic.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    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 {
    height: 600px;
    width: 450px;
    background-color: rgba(0, 0, 0, .45);
    border-radius: 10px;
    margin: auto;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-container .form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-container form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.content-container img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-top: -100px;
}

.content-container h2 {
    font-size: 45px;
    font-weight: 800;
    margin-bottom: 40px;
}

.content-container button {
    margin-top: 6px;
    width: 80px;
    height: 30px;
    border-color: #041c32;
    background-color: #2d4263;
    font-size: 16px;
    color: white;
}

.content-container input {
    font-size: 20px;
    border-radius: 5px;
    width: 300px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: center;
}

.content-container a {
    text-decoration: none;
    color: white;
}