1. 程式人生 > >用定位實現機器人效果

用定位實現機器人效果

gre span arr eight adding header fff posit class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #robot{
                width: 600px;
                height: 500px;
                margin: 50px auto;
                border: 4px solid lightgrey;
                position: relative;
            }
            #robot .header{
                width: 222px;
                height: 117px;
                background: #A5B12D;
                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: #A5B12D;
            }
            #robot .earr{
                width: 10px;
                height: 26px;
                position: absolute;
                left: 371px;
                top: 34px;
                background: #A5B12D;
            }
            #robot .body{
                width: 222px;
                height: 135px;
                background: #A5B12D;
                position: absolute;
                top: 187px;
                left: 189px;
            }
            #robot .arml{
                width: 30px;
                height: 98px;
                background: #A5B12D;
                position: absolute;
                left: 150px;
                top: 187px;
            }
            #robot .armr{
                width: 30px;
                height: 98px;
                background: #A5B12D;
                position: absolute;
                left: 420px;
                top: 187px;
            }
            #robot .legl{
                width: 30px;
                height: 73px;
                position: absolute;
                background: #A5B12D;
                top: 322px;
                left: 230px;
            }
            #robot .legr{
                width: 30px;
                height: 73px;
                position: absolute;
                background: #A5B12D;
                top: 322px;
                left: 340px;
            }
        
</style> </head> <body> <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>

用定位實現機器人效果