用户名片

介绍

CSS 样式是前端开发的必备技能之一,下面请用你丰富的经验帮小蓝完成一个漂亮的用户名片制作吧。

准备

本题已经内置了初始代码,打开实验环境,目录结构如下:

1
2
3
4
├── css
│ └── style.css
├── images
└── index.html

其中:

  • css/style.css 是样式文件。
  • images 是页面布局需要用到的图片素材。
  • index.html 是主页面。

选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。

接着,打开环境右侧的【Web 服务】,就可以在浏览器中看到如下效果:

图片描述

目标

请通过补充或者修改 css/style.css 中的样式(注意:不要修改元素大小),达到以下效果:

  1. 实现卡片(class = card) 和用户头像(class = avatar) 元素水平垂直居中。
  2. 左侧文字(class = levelclass = points)水平居中。

完成后,最终页面效果如下:

图片描述

规定

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

判分标准

  • 本题完全实现题目目标得满分,否则得 0 分。

总通过次数: 2328 | 总提交次数: 2419 | 通过率: 96.2%

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

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
/* TODO 待补充代码 */
body {
display: flex;
justify-content: center;
align-items: center;
}

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