css 采用div定位的方式绘制一个安卓机器人的示例分享


摘要:
下文讲述使用css代码div拼接的模式绘制出的安卓机器人图标的示例分享,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #robot{
                width: 500px;
                height: 400px; 
                border: 4px solid lightgrey;
                position: relative;
            }
            #robot .header{
                width: 222px;
                height: 117px;
                background: blue;
                position: absolute;
                left: 189px;
                top: 60px;
            }
            #robot .header .eyel{
                position: absolute;
                left: 55px;
                top: 45px;
                width: 20px;
                height: 20px;
                background: #fff;
            }
            #robot .header .eyer{
                position: absolute;
                right: 55px;
                top: 45px;
                width: 20px;
                height: 20px;
                background: #fff;
            }
            #robot .earl{
                width: 10px;
                height: 26px;
                position: absolute;
                left: 229px;
                top: 34px;
                background: blue;
            }
            #robot .earr{
                width: 10px;
                height: 26px;
                position: absolute;
                left: 371px;
                top: 34px;
                background: blue;
            }
            #robot .body{
                width: 222px;
                height: 135px;
                background: blue;
                position: absolute;
                top: 187px;
                left: 189px;
            }
            #robot .arml{
                width: 30px;
                height: 98px;
                background: blue;
                position: absolute;
                left: 150px;
                top: 187px;
            }
            #robot .armr{
                width: 30px;
                height: 98px;
                background: blue;
                position: absolute;
                left: 420px;
                top: 187px;
            }
            #robot .legl{
                width: 30px;
                height: 73px;
                position: absolute;
                background: blue;
                top: 322px;
                left: 230px;
            }
            #robot .legr{
                width: 30px;
                height: 73px;
                position: absolute;
                background: blue;
                top: 322px;
                left: 340px;
            }
        </style>
    </head>
    <body>
     <p>
      maomao365.com <br />
      css绘制安卓机器人的示例分享
     </p>
     <hr />
        <div id="robot">
            <div class="header">
                <div class="eyel"></div>
                <div class="eyer"></div>
            </div>
            <div class="earl"></div>
            <div class="earr"></div>
            <div class="body"></div>
            <div class="arml"></div>
            <div class="armr"></div>
            <div class="legl"></div>
            <div class="legr"></div>
        </div>
    </body>
</html>
css绘制安卓机器人的示例分享

css绘制安卓机器人的示例分享