zoukankan      html  css  js  c++  java
  • CSS3---9.用CSS3属性绘制安卓机器人

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>安卓机器人</title>
    </head>
    <style>
    .android{
         500px;
        height: 500px;
        border: 1px solid #ccc;
        margin: 100px auto;
    }
    .head {
        position: relative;
         250px;
        height: 125px;
        background-color: yellowgreen;
        margin: 0px auto 10px;
        border-radius: 125px 125px 0 0;
    }
    .head::before,.head::after{
        content: "";
         20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        bottom: 40px;
    }
    .head::before{
        left: 60px;
    }
    .head::after{
        right: 60px;
    }
    .body{
        position: relative;
         250px;
        height: 250px;
        background-color: yellowgreen;
        margin: 0 auto;
        border-radius: 0 0 20px 20px ;
    
    }
    .body::before,.body::after{
        content: "";
        position: absolute;
        background-color: yellowgreen;
         30px;
        height: 180px;
        border-radius: 10px;
        top:20px;
    }
    .body::before{
    left:-40px;
    }
    .body::after{
    right:-40px;
    }
    .foot{
        position: relative;
        margin: 0 auto;
         250px;
        height: 125px;
    }
    .foot::before,.foot::after{
        content: "";
        position: absolute;
        background-color: yellowgreen;
         30px;
        height: 100px;
        border-radius:0 0 10px 10px;
        top:0px;
    }
    .foot::before{
    left:60px;
    }
    .foot::after{
    right:60px;
    }
    </style>
    <body>
        <div class="android">
            <div class="head"></div>
            <div class="body"></div>
            <div class="foot"></div>
        </div>
    </body>
    </html>
    

  • 相关阅读:
    iOS9--适配系列教程(原文/译文)
    电梯调度设计思路及算法
    10大高频率单词筛选
    html知识点总结
    关于博客
    Java构造器内部的多态方法
    Java初学者必学的六大Java语言要点
    Java中的length字段和length()方法
    Java学习有方法有捷径
    Java 分隔符函数split的使用注意事项
  • 原文地址:https://www.cnblogs.com/Tobenew/p/10525722.html
Copyright © 2011-2022 走看看