画一只考拉

作者:江月迟迟

发表于:2024-12-10

字数统计:933 字

预计阅读4分钟

介绍

CSS3 的 Flex 弹性布局和 Grid 网格布局已经成为前端页面排版的主流选择。

本次挑战将使用这两种布局方式来画一只考拉。

准备

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

├── styles.css
└── index.html

文件说明如下：

• styles.css 是页面样式文件。
• index.html 是页面布局结构。

你可以参考如下步骤访问项目：

1. 选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。
2. 打开环境右侧的 Web 服务，就可以在浏览器中看到未完成的考拉。

目标

请根据 styles.css 文件中的提示和要求添加所需的 CSS 代码，完整地画出一只如下效果的考拉：

1. 创造一个网格布局，6 个纵列（column）：前后两列两等分（可用 fr 代表一份），中间 4 列均为 25px 宽度；4 个横行（row）：上下均为 50px，中间两等分。
2. 绘制眼睛：长为 30px，高为 30px，颜色为 #090b0e，圆角为 50%，位置居中。
3. 绘制鼻子：高为 100%，颜色为 #3b464f，上方圆角为 50%，下方圆角为 40%，按照图示选取 grid-area。
4. 绘制腮红：长为 40px，高为 30px，颜色为 #f6b9bf，圆角为 50%。

参考样例

考拉脸上各部位的位置请参考如下的网格图：

要求规定

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

评分标准

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

总通过次数: 745 | 总提交次数: 787 | 通过率: 94.7%

难度: 简单 标签: CSS3, Web 前端

题解

html,
body {
  background: #f8d8ab;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.ears {
  display: flex;
  justify-content: space-between;
  position: relative;
  top: 240px;
  width: 550px;
}

.ear {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #738394;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #f6b9bf;
}

.face {
  z-index: 1;
  width: 430px;
  height: 380px;
  background: #a0abb6;
  border-radius: 50%;
  align-items: center;

  /* 创造一个网格布局
  6 个纵列（column） --  
    前后两列两等分 (可用 fr 代表一份)，
    中间 4 列均为 25px 宽度
  4 个横行（row） -- 
    上下均为 50px，中间两等分
  */
  display: grid;
  grid-template-columns: 1fr 25px 25px 25px 25px 1fr;
  grid-template-rows: 50px 1fr 1fr 50px;
}

.eye {
  /* 
    长为 30px
    高为 30px
    颜色为 #090b0e
    圆角为 50%
    位置居中
  */
  width: 30px;
  height: 30px;
  background-color: #090b0e;
  border-radius: 50%;

}

.eye.left {
  /* 按照图示选取 grid-area */
  grid-area: 2/2/3/3;
}

.eye.right {
  /* 按照图示选取 grid-area */
  grid-area: 2/5/3/6;
}

.nose {
  /* 
    高为 100%
    颜色为 #3b464f
    上方圆角为 50%
    下方圆角为 40%
    按照图示选取 grid-area
  */
  height: 100%;
  background-color: #3b464f;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
  grid-area: 3/2/4/6;
}

.blush {
  /* 
    长为 40px
    高为 30px
    颜色为 #f6b9bf
    圆角为 50%
  */
  width: 40px;
  height: 30px;
  background-color: #f6b9bf;
  border-radius: 50%;
}

.blush.left {
  /* 按照图示选取 grid-area
      并调整位置
   */
   grid-area: 2/1/3/2;
   align-self: flex-end;
   justify-self: end;
}

.blush.right {
  /* 按照图示选取 grid-area
    并调整位置
  */
  grid-area: 2/6/3/7;
  align-self: flex-end;
  
}