【CSS——功能实现】用户名片（蓝桥杯真题-2321）【合集】

Rossy Yan

发布于 2025-02-02 22:40:39

4130

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

背景介绍

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

准备步骤

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

├── css
│   └── style.css
├── images
└── index.html

其中：

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

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

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

目标效果

请通过补充或者修改 css/style.css 中的样式（注意：不要修改元素大小），达到以下效果：

实现卡片（class = card）和用户头像（class = avatar）元素水平垂直居中。
左侧文字（class = level 和 class = points）水平居中。

完成后，最终页面效果如下：

要求规定

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

判分标准

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

通关代码✔️

* {
  margin: 0;
  padding: 0;
}
html,
body {
  background: #fceeb5;
  height: 100%;
  overflow: hidden;
}

html,
body {
  background: #fceeb5;
  display: flex;
  justify-content:center;
  align-items: center;
}
.card {
  width: 450px;
  height: 250px;
  background: #fff;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.card h1 {
  text-align: center;
}

.card img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}
.additional {
  position: absolute;
  height: 100%;
  background: #92bca6;
  z-index: 2;
}

.user-card {
  width: 150px;
  height: 100%;
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user-card .points {
  top: 85%;
}
.general {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 12px;
  padding-top: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}
.more{
  display: block;
  text-align: right;
}
/* level 和  points 定位位置 */
.level,
.points {
  width: 72px;
  text-align: center;
  position: absolute;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 0;
  border-radius: 100px;
  white-space: nowrap;
}

/*  level 位置 */
.level {
  top: 15% !important;
}

/* TODO 待补充代码 */

代码解析📑

一、Html 部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户名片</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="center">
      <div class="card">
        <div class="additional">
          <div class="user-card">
            <div class="level center">Level 13</div>
            <div class="points center">5312 Points</div>
            <img class="avatar center" src="./images/avatar.png" alt="" />
          </div>
        </div>
        <div class="general">
          <h1>小蓝</h1>
          <p>
            我们应该赞美岩石的坚定。我们应该学习岩石的坚定。我们应该对革命有着坚强的信念。
          </p>
          <span class="more">蓝桥云课</span>
        </div>
      </div>
    </div>
  </body>
</html>

1. 文档头部设置

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="en">：设置页面语言为英语。
在 <head> 标签中：
- <meta charset="UTF - 8" />：指定字符编码为 UTF - 8，确保页面能正确显示各种字符。
- <meta http - equiv="X - UA - Compatible" content="IE=edge" />：让页面在 Internet Explorer 中以最新版本的渲染引擎显示。
- <meta name="viewport" content="width=device - width, initial - scale=1.0" />：使页面在不同设备上能正确显示，宽度根据设备屏幕宽度自适应。
- <title>用户名片</title>：设置页面标题为 “用户名片”。
- <link rel="stylesheet" href="./css/style.css" />：引入外部 CSS 文件 style.css，用于为页面元素添加样式。

2. 页面主体结构

<body> 标签内包含了页面的主要内容。
<div class="center">：作为一个外层容器，可能用于将内部的名片居中显示，具体取决于 CSS 样式的设置。
<div class="card">：表示用户名片的整体容器，包含名片的各个部分。
- <div class="additional">：作为名片的附加信息部分的容器。
  - <div class="user - card">：包含用户的一些额外信息，如等级、积分和头像。
    - <div class="level center">Level 13</div>：显示用户的等级信息。
    - <div class="points center">5312 Points</div>：显示用户的积分信息。
    - <img class="avatar center" src="./images/avatar.png" alt="" />：显示用户的头像，图片源文件为 ./images/avatar.png。
- <div class="general">：作为名片的主要信息部分的容器。
  - <h1>小蓝</h1>：显示用户的姓名。
  - <p> 标签内的文本：显示关于用户的一段描述。
  - <span class="more">蓝桥云课</span>：显示额外的信息，如所属平台等。

二、CSS 部分

* {
  margin: 0;
  padding: 0;
}
html,
body {
  background: #fceeb5;
  height: 100%;
  overflow: hidden;
}

html,
body {
  background: #fceeb5;
  display: flex;
  justify-content:center;
  align-items: center;
}
.card {
  width: 450px;
  height: 250px;
  background: #fff;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.card h1 {
  text-align: center;
}

.card img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
}
.additional {
  position: absolute;
  height: 100%;
  background: #92bca6;
  z-index: 2;
}

.user-card {
  width: 150px;
  height: 100%;
  position: relative;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.user-card .points {
  top: 85%;
}
.general {
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 12px;
  padding-top: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}
.more{
  display: block;
  text-align: right;
}
/* level 和  points 定位位置 */
.level,
.points {
  width: 72px;
  text-align: center;
  position: absolute;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 0;
  border-radius: 100px;
  white-space: nowrap;
}

/*  level 位置 */
.level {
  top: 15% !important;
}

/* TODO 待补充代码 */

1. 全局样式重置

* { margin: 0; padding: 0; }：将所有元素的外边距和内边距都设置为 0，消除浏览器默认样式的影响。

2. HTML 和 body 样式设置

html, body { background: #fceeb5; height: 100%; overflow: hidden; }：设置 HTML 和 body 元素的背景颜色为 #fceeb5，高度为 100%，并隐藏溢出的内容。
html, body { background: #fceeb5; display: flex; justify - content: center; align - items: center; }：再次设置背景颜色，并将 HTML 和 body 元素设置为弹性布局，使内部元素在水平和垂直方向上都居中显示。

3. 名片容器样式设置

.card：设置名片容器的宽度为 450px，高度为 250px，背景颜色为白色，添加阴影效果，设置圆角边框，隐藏溢出内容，并将其定位方式设置为相对定位。
.card h1：将名片内的 h1 标题文本居中显示。
.card img：设置名片内图片的宽度和高度为 110px，并将其设置为圆形。

4. 附加信息部分样式设置

.additional：将附加信息部分的容器设置为绝对定位，高度为 100%，背景颜色为 #92bca6，并设置其层级为 2。
.user - card：设置用户信息卡片的宽度为 150px，高度为 100%，将其向左浮动，并使用弹性布局使其内部元素垂直居中显示。
.user - card .points：将积分信息定位到用户信息卡片的 85% 高度位置。

5. 主要信息部分样式设置

.general：设置主要信息部分的容器宽度为 300px，高度为 100%，将其定位到名片的右侧，设置层级为 1，添加内边距，并使用弹性布局使其内部元素在垂直方向上均匀分布。
.more：将 more 信息显示为块级元素，并将文本右对齐。

6. 等级和积分信息样式设置

.level, .points：设置等级和积分信息的宽度、文本对齐方式、定位方式、颜色、字体大小、背景颜色、内边距和圆角边框，并防止文本换行。
.level：将等级信息定位到用户信息卡片的 15% 高度位置，并使用 !important 确保该样式优先级最高。

三、工作流程 ▶️

HTML 代码构建了用户名片的基本结构，包括外层容器、名片容器、附加信息部分和主要信息部分，以及各个部分内的具体信息元素。
CSS 代码为这些 HTML 元素添加了样式，包括背景颜色、尺寸、定位、布局、字体样式等，使名片在页面上以特定的样式显示出来。通过将 HTML 和 CSS 结合，最终实现了一个具有特定样式的用户名片。