前言

官方告知我今天参加活动会得勋章，于是想了半天，总得创作一点东西，于是翻出来多年前的箱底技术，用CSS+HTML画一个小朋友，来过一个特殊的六一儿童节。如果有正在学习CSS和HTML技术的同学，这或许是一个比较有兴趣的小例子。
在这里插入图片描述

一、关于HTML和CSS

HTML是超文本标记语言（Hypertext Markup Language）的缩写。它是一种用来创建和设计网页的标准化语言。通过使用HTML，开发者可以定义文本、图片、音视频、表格、链接等内容在网页中的组织结构和样式。

CSS是层叠样式表（Cascading Style Sheets）的缩写。它是一种用来控制网页外观和布局的样式表语言。通过使用CSS，开发者可以对HTML页面的各种元素进行各种样式设定，例如文字大小、颜色、背景、边距等。

HTML和CSS通常一同使用，在构建网站时扮演着重要的角色。开发者通过HTML编写基础的网页内容和结构，通过CSS来规定具体的网页样式和布局。两者的结合，可以为用户带来更加美观、舒适、易于浏览和导航的网站体验。

二、开始编码

2.1 在HTML正文中配置好元素

<div class="child">
    <div class="head"></div>
    <div class="body"></div>
    <div class="left-hand"></div>
    <div class="right-hand"></div>
    <div class="left-leg"></div>
    <div class="right-leg"></div>
</div>

2.2 开始写各个元素的CSS

.child {
    position: relative;
    width: 100px;
    height: 200px;
    border-radius: 50px;
    background-color: #fdd6d6;
}
.head {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: #ffcd94;
}
.body {
    position: absolute;
    top: 70px;
    left: 30px;
    width: 40px;
    height: 80px;
    border-radius: 20px;
    background-color: #ffcd94;
}
.left-hand,
.right-hand {
    position: absolute;
    top: 80px;
    width: 20px;
    height: 60px;
    border-radius: 10px;
    background-color: #ffcd94;
}
.left-hand {
    left: 5px;
}
.right-hand {
    right: 5px;
}
.left-leg, .right-leg {
    position: absolute;
    top: 150px;
    width: 20px;
    height: 60px;
    border-radius: 10px;
    background-color: #ffcd94;
}
.left-leg {
    left: 25px;
}
.right-leg {
    right: 25px;
}