【安卓小绿人】

夜星639

于 2022-03-21 18:22:25 发布

阅读量358

点赞数

本文链接：https://blog.csdn.net/qq_65923595/article/details/123642347

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: black;
        }
        .box{
            width: 600px;
            height: 440px;
            margin: 80px auto;
            background-color: white;
        }
        .android{
            width: 340px;
            padding-top: 40px;
            margin: 0 auto;
            position: relative; 
        }
       /* 脑袋 */
       .head{
           width: 220px;
           height: 100px;
           margin: 0 auto 10px;
           border-radius: 100px 100px 0 0;
           background-color: green;
           position: relative;
       }
       /* 眼睛 */
       .head::before,
       .head::after{
           content: '';
           width: 20px;
           height: 20px;
           background-color: aliceblue;
           border-radius: 50%;
           position: absolute;
           top:40px;
       }
       .head::before{
           left: 50px;
       }
       .head::after{
           right: 50px;
       }
       /* 身体 */
       .body{
           width: 220px;
           height: 180px;
           margin: 0 auto;
           background-color: green;
           border-radius: 0 0 20px 20px;
           position: relative;
       }
       .body::before,
       .body::after{
           content: '';
           position: absolute;
           width: 50px;
           height: 80px;
           background-color: green;
           bottom: -80px;
           border-radius: 0 0 25px 25px;
       }
       .body::before{
           left: 40px;
       }
       .body::after{
           right: 40px;
       }
       /* 胳膊 */
       .arms{
           width: 340px;
           height: 150px;
           position: absolute;
           top: 150px;
       }
       .arms::before,
       .arms::after{
           content: '';
           position: absolute;
           width: 50px;
           height: 150px;
           background-color: green;
           border-radius: 25px;
       }
       .arms::after{
           right: 0;
       }
    </style>
</head>
<body>
    <div class="box">
        <div class="android">
            <div class="head"></div>
            <div class="body"></div>
            <div class="arms"></div>
        </div>
    </div>
</body>
</html>