简简单单机器人

复习CSS，敲一敲小demo

本文利用的CSS知识点有：

• CSS伪元素
• 子绝父相

然后似乎就没啥啦嘻嘻…

机器人骨架：

    <div class="box">
        <header></header>
        <div class="rbody">
            <div class="lfoot"></div>
            <div class="rfoot"></div>
        </div>
    </div>

给咱们可爱的机器人穿上衣服：

        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 400px;
            height: 600px;
            margin: 40px auto 0 auto;
            /*解决margin重合问题*/
            overflow: hidden;
        }
        header {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: teal;
            margin: 40px auto 0 auto;
            /*脑壳设置*/
            border-radius: 100px 100px 0 0;
        }

        header::before {
        	/* content必须要有，不论有没有值
        	伪元素为行内元素，要先转化成块级元素才可以设置宽高哈*/
            content: "";
            position: absolute;
            bottom: 30px;
            left: 50px;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
        }
        header::after {
            content: "";
            position: absolute;
            bottom: 30px;
            right: 50px;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border-radius: 50%;
        }
        .rbody {
            position: relative;
            width: 200px;
            height: 220px;
            background-color: teal;
            margin: 6px auto 0 auto;
        }
        .rbody::before {
            position: absolute;
            top: 20px;
            left: -30px;
            content: "";
            width: 20px;
            height: 140px;
            background-color: teal;
            border-radius: 10px;
        }
        .rbody::after {
            position: absolute;
            top: 20px;
            right: -30px;
            content: "";
            width: 20px;
            height: 140px;
            background-color: teal;
            border-radius: 10px;
        }
        .lfoot {
            position: absolute;
            bottom: -90px;
            left: 45px;
            width: 20px;
            height: 90px;
            background-color: teal;
            border-radius: 0 0 10px 10px;
        }
        .rfoot {
            position: absolute;
            bottom: -90px;
            right: 45px;
            width: 20px;
            height: 90px;
            background-color: teal;
            border-radius: 0 0 10px 10px;
        }

机器人做好啦，让我们来康康效果吧