今天自己画了个安卓机器人,之前听徐大大讲过一次,查手册去动手的时候其实发觉不是很难,这种规则的图像还是很好画的,主要是用<div>标签和<span>标签去做的,通过CSS添加样式,感觉display这个属性蛮有用的,transform用起来也很方便.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <title>网页标题</title>

    <meta name="keywords" content="关键字列表" />

    <meta name="description" content="网页描述" />

    <link rel="stylesheet" type="text/css" href="" />

    <style type="text/css">

        .box{

            width:600px;

            margin:50px auto;

        }

        /*头部*/

        .head{

            width:200px;

            height:100px;

            background-color:#A4CA39;

            margin:0px auto;

            border-radius:100px 100px 0 0;

        }

        .span1{

            display:block;

            width:24px;

            height:24px;

            border-radius:12px;

            transform:translate(40px,42px);

            background-color:#fff;

        }

        .span2{

            display:block;

            width:24px;

            height:24px;

            border-radius:12px;

            transform:translate(133px,17px);

            background-color:#fff;

        }

        /*身体*/

        .middle{

            width:200px;

            height:200px;

            margin:10px auto 0px;

            background-color:#A4CA39;

            border-radius:0px 0px 27px 27px;

        }

        .box .middle .span3{

            display:block;

            width:40px;

            height:160px;

            border-radius:45px;

            background-color:#A4CA39;

            transform:translate(-52px,14px);

        }

        .box .middle .span4{

            display:block;

            width:40px;

            height:160px;

            border-radius:45px;

            background-color:#A4CA39;

            transform:translate(209px,-143px);

        }

        /*脚部*/

        .box .span5{

            display:block;

            width:50px;

            height:100px;

            border-radius:0px 0px 30px 30px;

            transform:translate(231px,0px);

            background-color:#A4CA39;

        }

        .box .span6{

            display:block;

            width:50px;

            height:100px;

            border-radius:0px 0px 30px 30px;

            transform:translate(321px,-100px);

            background-color:#A4CA39;

        }

    </style>

    <script type="text/javascript"></script>

</head>

<body>

<div class="box">

    <div class="head">

        <span class="span1"></span>

        <span class="span2"></span>

    </div>

    <div class="middle">

        <span class="span3"></span>

        <span class="span4"></span>

    </div>

    <span class="span5"></span>

    <span class="span6"></span>

</body>

</html>

my robot:

html(三)的更多相关文章

  1. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  2. 【原】FMDB源码阅读（三）

    [原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...

  3. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  5. 简谈百度坐标反转至WGS84的三种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 基于百度地图进行数据展示是目前项目中常见场景,但是因为百度地图 ...

  6. 一起学 Java（三） 集合框架、数据结构、泛型

    一.Java 集合框架 集合框架是一个用来代表和操纵集合的统一架构.所有的集合框架都包含如下内容: 接口:是代表集合的抽象数据类型.接口允许集合独立操纵其代表的细节.在面向对象的语言,接口通常形成一个 ...

  7. 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 如何一步一步用DDD设计一个电商网站（三）—— 初涉核心域

    一.前言 结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...

  9. 测试一下StringBuffer和StringBuilder及字面常量拼接三种字符串的效率

    之前一篇里写过字符串常用类的三种方式<java中的字符串相关知识整理>,只不过这个只是分析并不知道他们之间会有多大的区别,或者所谓的StringBuffer能提升多少拼接效率呢?为此写个简 ...

  10. 从0开始搭建SQL Server AlwaysOn 第三篇（配置AlwaysOn）

    从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://w ...

随机推荐

  1. 计算方法（一）用C#实现数值迭代

    平时,经常会遇到解方程,计算方法中常用的有二分法(精度太低,迭代次数多,一般没人用),牛顿迭代法,弦截法,网上大多都是C++或者Java的实现代码,很少有C#的,我在本科毕业论文中用到了这些,那时也需 ...

  2. css10定位属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. http方式的联调经验

    这近在做一个项目,现在刚与厂家做联调.我的系统是windows2008,他的测试机是unix,他本机是XP的.本来用httppost方式给他本机发送中文数据是正常的,但是发送到他的unix上,中文就变 ...

  4. AppDomain.CurrentDomain.GetAssemblies()

    AppDomain.CurrentDomain.GetAssemblies() ,获取已加载到此应用程序域的执行上下文中的程序集 解释地址 从微软的解释也可以得知,这个方法只能获取已经加载到此应用程序 ...

  5. clang: error: unable to execute command: Segmentation fault: 11

    我在Archive的时候出现了上面这个错误, 解决方法很简单: After huge trying I have disabled the Bitcode in Project's Target-&g ...

  6. oracle 使用 ALTER 操作列

    使用 ALTER TABLE 语句追加, 修改, 或删除列的语法

  7. SelectObject

    CPen* SelectObject( CPen* pPen ); CBrush* SelectObject( CBrush* pBrush ); virtual CFont* SelectObjec ...

  8. 浏览器d判断

    1.判断浏览器类型 if navigator.userAgent.indexOf(”MSIE”)>0) {} //判断是否IE浏览器 if(isFirefox=navigator.userAge ...

  9. jquery keypress事件浏览器兼容性

    今天在做“财务管理系统”的时候,使用jquery的ajax从前台传递用户输入到后台,并保存到数据库,但是在前台为了界面的简介和一致性,没有使用按 钮来实现"确定"和"取消 ...

  10. 获取元素位置信息：getBoundingClientRect

    一个神奇的方法. 一.历史 偷个懒,上个传送门:http://www.cnblogs.com/2050/archive/2012/02/01/2335211.html 二.介绍 DOM元素方法,返回一 ...