Web 利用纯html和css画出一个android机器人

Android机器人

这个小项目是为了熟悉border-radius 圆角边框

参考文档

border-radius

源代码

<style>.robot{width: 500px;height: 550px;border: 1px solid red;margin: 30px auto;position: relative;}.robot .head{width: 250px;height: 125px;border-top-left-radius: 125px;border-top-right-radius: 125px;background-color: #4cae4c;margin: 10px auto;position: relative;}.robot .eyes{width: 25px;height: 25px;border-radius: 25px;position: absolute;background-color: white;}.robot .eyes-left{top: 70px;left: 55px;}.robot .eyes-right{top: 70px;left: 155px;}.robot .body{width: 250px;height: 270px;background-color: #4cae4c;margin: 0 auto;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;position: relative;}.robot .leg{width: 20px;height: 120px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;position: absolute;background-color: #4cae4c;}.robot .leg-left{top: 238px;left: 55px;}.robot .leg-right{top: 238px;left: 175px;}.robot .hand{width: 20px;height: 150px;border-radius: 5px;position: absolute;background-color: #4cae4c;}.robot .hand-left{top: 173px;left: 80px;}.robot .hand-right{top: 173px;left: 395px;}
</style>
<body>
<div class="robot"><div class="hand hand-left"></div><div class="hand hand-right"></div><div class="head"><div class="eyes eyes-left"></div><div class="eyes eyes-right"></div></div><div class="body"><div class="leg leg-left"></div><div class="leg leg-right"></div></div></div>
</body>

Web 利用纯html和css画出一个android机器人相关推荐

用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 [html] view pla ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 用css画出一个圆圈，里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
用css画出一个圆圈，里面有个叉号（不能用英文字母x）
用css画出一个圆圈,里面有个叉号(不能用英文字母x) #cyc {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;b ...
C语言小程序：如何用代码“画”出一个爱心
利用ASCII编码第三个字符,作为基础,然后利用三个多重循环画出一个爱心出来.要使用控制台改变运行框大小和文字的颜色,黑白的爱心不免有些诡异. #define _CRT_SECURE_NO_WARNI ...
php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法发布时间:2020-09-14 14:49:22 来源:亿速云阅读:83 作者:小新这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...

Web 利用纯html和css画出一个android机器人

Web 利用纯html和css画出一个android机器人相关推荐

最新文章

热门文章