本笔试共包含 2 题，限时 60 分钟，允许使用自己熟悉的 IDE 进行开发，允许使用自己熟悉的技术栈，允许查阅资料，严禁使用 Chat-GPT 等 AI 问答工具。

试题一、CSS 绘画

1. 试题内容

使用 CSS 绘制出以下雪人的图形，要求尽可能还原图中雪人，图中未指定的尺寸自行判断即可，不要求完全相同。

snowman

2. 得分说明

评分点：

代码风格良好
完成雪人的绘制

加分项：

熟悉 CSS 语法

3. 参考代码

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Snowman</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="hat">
      <div class="layer1"></div>
      <div class="layer2"></div>
      <div class="layer3"></div>
    </div>

    <div class="head">
      <div class="eye eye1"></div>
      <div class="eye eye2"></div>
      <div class="mouth"></div>
    </div>

    <div class="body">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="scarf"></div>
    </div>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: lightblue;
  height: 100vh;
  height: 100svh;
}

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

.layer1 {
  width: 50px;
  height: 40px;
  background: black;
  border-radius: 5px 5px 0 0;
}

.layer2 {
  width: 50px;
  height: 5px;
  background: red;
}

.layer3 {
  width: 70px;
  height: 10px;
  background: black;
  border-radius: 3px 3px 0 0;
}

/* head */
.head {
  width: 70px;
  height: 70px;
  position: relative;
  background: white;
  clip-path: circle(50% at 50% 30%);
}

.eye {
  top: 15px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background: black;
  transform: translate(-50%, 0);
}

.eye1 {
  margin-left: 10px;
}

.eye2 {
  margin-left: -10px;
}

.mouth {
  top: 30px;
  left: 50%;
  width: 13px;
  height: 13px;
  position: absolute;
  background: orange;
  transform: translate(-50%, 0);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* body */
.body {
  width: 110px;
  height: 110px;
  background: white;
  border-radius: 50%;
  position: relative;
  transform: translate(0, -25px);

  gap: 7px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.dot {
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
}

.scarf {
  top: 2px;
  width: 74px;
  height: 12px;
  background: red;
  position: absolute;
  border-radius: 5px 5px 0 0;
}

试题二、算术小能手

1. 试题内容

要求程序可以随机生成一道 A*B 的乘法计算题，A，B 的值在 0-9 之间，用户输入点击确认后弹窗显示用户输入的答案是否正确。

本题允许使用自己熟悉的技术栈，不要求 CSS 样式，实现功能即可，但是复刻或者自定义新的样式可作为加分项。

multiply