码迷,mamicode.com
首页 > 其他好文 > 详细

用定位实现机器人效果

时间:2018-07-13 13:23:05      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:机器人   ati   charset   pos   border   top   div   set   ade   

<!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>

 

用定位实现机器人效果

标签:机器人   ati   charset   pos   border   top   div   set   ade   

原文地址:https://www.cnblogs.com/gxywb/p/9304290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!