Android机器人纯HTML

Web前段基础

HTML-01Android机器人

此页面包含的知识点：
背景色：background-color；外边距：margin；
圆角：border-radius；
定位：position；值relative，absolute；
相对定位：
1）占位；
2）相对于自身位置定位
绝对定位：
1）不占位；
2）相对于最近的有定位的父级，如果父级都没有定位则相对于浏览器第一屏的可视区域。
变形、转换：transform；值 rotate（旋转单位deg）、scale（缩放单位 %）
transform 变形、转换
rotate 旋转
30deg 30度
scale 缩放
scale(1); 等比例缩放

    <style>.body {width: 220px;height: 184px;background-color: #a4ca39;margin: 200px auto 0 auto;border-radius: 0 0 20px 20px;position: relative;}.head {width: 220px;height: 110px;background-color: #a4ca39;border-radius: 110px 110px 0 0;position: absolute;top: -118px;}.eyeLeft {width: 20px;height: 20px;background-color: white;border-radius: 50%;position: absolute;top: 42px;left: 50px;}.eyeRight {width: 20px;height: 20px;background-color: white;border-radius: 50%;position: absolute;top: 42px;right: 50px;}.earLeft {width: 6px;height: 60px;background-color: #a4ca39;border-radius: 3px;position: absolute;top: -30px;left: 60px;transform: rotate(-30deg);}.earRight {width: 6px;height: 60px;background-color: #a4ca39;border-radius: 3px;position: absolute;top: -30px;right: 60px;transform: rotate(30deg);}.armLeft {width: 50px;height: 150px;background-color: #a4ca39;border-radius: 25px;position: absolute;top: 0;left: -58px;}.armRight {width: 50px;height: 150px;background-color: #a4ca39;border-radius: 25px;position: absolute;top: 0;right: -58px;}.legLeft {width: 50px;height: 80px;background-color: #a4ca39;border-radius: 0 0 25px 25px;position: absolute;bottom: -80px;left: 45px;}.legRight {width: 50px;height: 80px;background-color: #a4ca39;border-radius: 0 0 25px 25px;position: absolute;bottom: -80px;right: 45px;}</style>
</head><body><div class="body"><div class="head"><div class="eyeLeft"></div><div class="eyeRight"></div><div class="earLeft"></div><div class="earRight"></div></div><div class="armLeft"></div><div class="armRight"></div><div class="legLeft"></div><div class="legRight"></div></div>
</body></html>

Android机器人纯HTML相关推荐

Web 利用纯html和css画出一个android机器人
Android机器人这个小项目是为了熟悉border-radius 圆角边框参考文档 border-radius 源代码 <style>.robot{width: 500px;heig ...
android机器人酷炫壁纸,机器人秀app下载
机器人秀是一款以安卓机器人为原型打造的官方卡通画换装应用,并结合主题壁纸和分享的功能,为应用与手机之间搭上了一条良好的桥梁.想要体验安卓在你手上被玩弄的感觉,或是喜欢打扮恶搞的朋友们,可不要错过了! ...
android 机器人绘制,Android绘制机器人小实例
本文实例通过前面学过的Paint.Canvas等2D绘画技术来实现在手机屏幕上绘制Android机器人. 具体代码实现和效果: 用来显示自定义的绘图类的布局文件 res/layout/main.xml ...
用android怎么做一个机器人,怎样写一个类似ROS的易用的android机器人框架（2）
怎样写一个类似ROS的易用的android机器人框架(2) 接下来,我们一步步来实现这个几个目标 ROS式节点通讯的Android实现相关代码实现位于 ai.easy.robot.framework ...
使用html5 canvas 绘制Android机器人
练习使用Html5 canvas 绘制Android机器人. 要点:当对画布进行变换的时候,需要使用 save() 方法和 restore() 方法,它们应该成对使用,且 restore() 方法不 ...
H5绘制Android机器人
H5提供了很多绘画功能,让页面更加炫酷.这也是H5很受欢迎的原因之一.下面是绘制Android机器人全部代码: <!DOCTYPE html> <html lang="en ...
android机器人方向,Android绘制机器人小实例
本文实例通过前面学过的Paint.Canvas等2D绘画技术来实现在手机屏幕上绘制Android机器人. 具体代码实现和效果: 用来显示自定义的绘图类的布局文件 res/layout/main.xml ...
绘制Android机器人（c语言）
绘制Android机器人用c语言绘制Android机器人:难点在于坐标值的计算用到的主要的绘图函数: 函数功能 fillellipse 画填充椭圆(有边框) fillpie 画填充椭圆扇形(有边 ...
在Android中用纯Java代码布局
感谢大佬:https://www.jianshu.com/p/7aedea560f16 在Android中用纯Java代码布局本文的完成了参考了一篇国外的教程,在此表示感谢. Android中的界面 ...

Android机器人纯HTML

Web前段基础

HTML-01Android机器人

Android机器人纯HTML相关推荐

最新文章

热门文章