html(三)

今天自己画了个安卓机器人,之前听徐大大讲过一次,查手册去动手的时候其实发觉不是很难,这种规则的图像还是很好画的,主要是用<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(三)的更多相关文章

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的插件生态可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
【原】FMDB源码阅读（三）
[原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...
Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀修改之后会弹出这个,点击"是" 3.运行test.js 源文件使用node.js运行之后的. 如果该路径下没有该 ...
简谈百度坐标反转至WGS84的三种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景基于百度地图进行数据展示是目前项目中常见场景,但是因为百度地图 ...
一起学 Java（三）集合框架、数据结构、泛型
一.Java 集合框架集合框架是一个用来代表和操纵集合的统一架构.所有的集合框架都包含如下内容: 接口:是代表集合的抽象数据类型.接口允许集合独立操纵其代表的细节.在面向对象的语言,接口通常形成一个 ...
谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
如何一步一步用DDD设计一个电商网站（三）—— 初涉核心域
一.前言结合我们本次系列的第一篇博文中提到的上下文映射图(传送门:如何一步一步用DDD设计一个电商网站(一)—— 先理解核心概念),得知我们这个电商网站的核心域就是销售子域.因为电子商务是以信息网络 ...
测试一下StringBuffer和StringBuilder及字面常量拼接三种字符串的效率
之前一篇里写过字符串常用类的三种方式<java中的字符串相关知识整理>,只不过这个只是分析并不知道他们之间会有多大的区别,或者所谓的StringBuffer能提升多少拼接效率呢?为此写个简 ...
从0开始搭建SQL Server AlwaysOn 第三篇（配置AlwaysOn）
从0开始搭建SQL Server AlwaysOn 第三篇(配置AlwaysOn) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://w ...

随机推荐

wildcard
[rusky@rhel7 test]$ lstest1 test123 test2 test317 test33 test335 test336 test44 testtest[rus ...
hdu 2186
#include <iostream> using namespace std; int main() { int a,b,c,k1,k2,k3,m,n; cin>>m; wh ...
asp.net程序中如何使用皮肤更换的小功能
写这篇文章,因要往OA系统上添加更换主题的功能,在网上仔细搜索了一下,主要有几种方法可以实现, 第一种:使用原生态javascript+Css来实现,(代码多,看着纠结,对于前台不熟悉的程序员来说看深 ...
Android Studio 将工程作为第三方类库的步骤
一.将工程的module名称修改为自己要添加的类库名称 1.选中module文件夹右键到Rename项 2.选中Rename module项 3.修改为自己的名称,如VolleyLibary 二.修改 ...
WebStorm修改默认快捷键
打开 "File" -> "Setting" -> "keymap",即可修改.
Entity Framework 的事务
一个db.SaveChanges()相当于一个事务,多个db.SaveChanges()保证操作完整性则需要使用事务在Entity Framework 中使用事务,事务只会对数据库操作进行回滚,不会 ...
php中iconv函数的一个小bug--转载
iconv转换字符集很好用,但是有时候你会发现iconv转换的时候会返回false或者空字符串,严格说来这算不上是iconv的问题,这其实是字符集的问题,但是实际编码中应该算是iconv的bug了. ...
[转]C++宏定义详解
一.#define的基本用法 #define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能理解该命令的本质 ...
控件真的很好用，突然感觉自己以前研究Discuz！NT366源码的方式很2了
控件真的很好用,突然感觉自己以前研究Discuz!NT366源码的方式很2了,就是按钮上的或其他控件上的图片哪里去了?
Java中的List（转）
List包括List接口以及List接口的所有实现类.因为List接口实现了Collection接口,所以List接口拥有Collection接口提供的所有常用方法,又因为List是列表类型,所以Li ...

html(三)

html(三)的更多相关文章

随机推荐

热门专题