用定位實現機器人效果
阿新 • • 發佈:2018-07-13
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>
用定位實現機器人效果