画一只考拉

介绍

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

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

准备

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

1
2
├── 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 前端

题解

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
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;
  
}