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 ...
随机推荐
- 外网访问自己的tomcat
我们平常学习时经常会写一下javaweb程序,我们为了更能逼近现实,就想着自己的javaweb程序发布后,外网的同学能够访问我们的网站,难道我们去买空间,去买域名嘛,其实也没必要,我们只是学习,测试之 ...
- Js实现简单的联动，无数据库版本
<html> <head> <title></title> <script language="javascript" typ ...
- 自制Javascript分页插件，支持AJAX加载和URL带参跳转两种初始化方式，可用于同一页面的多个分页和不同页面的调用
闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分 ...
- gc内存回收机制
判断哪些对象可回收 GC是通过对象是否存活来决定是否进行回收,判断对象是否存活主要有两种算法:引用计数算法.可达性分析算法 引用计数算法 引用计数的算法原理是给对象添加一个引用计数器,每被引用一次计数 ...
- 武汉科技大学ACM：1001: 华科版C语言程序设计教程（第二版）习题6.7
Problem Description 输出杨辉三角前n行. Input 输入一个数n(n <= 9) Output 输出杨辉三角前n行.(注意行末不能有多余的空格,数字以%3d的格式输出) S ...
- java的注释
最近在做java项目开始关注和注意一些java规范,目的只是为了让自己和别人更容易理解自己写的代码和复用. 一个重要的原则就是:问你自己,你如果从来没有见过这段代码,你要快速地知道这段代码是干什么的, ...
- 26.单片机中利用定时器中断,在主流程while(1){}中设置每隔精确时间计量
{ CountMilliseconds++;//只负责自加,加到最大又重新从0开始 } u16 setDelay(u16 t) { ); } u8 checkDelay (u16 t)//返回非零表示 ...
- cmd命名设置成全局
如在jsdoc里.想要把jsdoc命名设置成全局.只要把环境变量里面的用户变量里面的path变量值增加 C:\Program Files\nodejs;E:\Program Files (x86)\j ...
- Debian、Ubuntu常用命令大全
注:本人是用的Debian,个别命令可能有问题. 原文:http://www.jb51.net/os/Ubuntu/56362.html 一.文件/文件夹管理 ls 列出当前目录文件(不包括隐含文件) ...
- apache2.2 虚拟主机配置详解
一.修改httpd.conf 打开appserv的安装目录,找到httpd.conf文件,分别去掉下面两行文字前面的#号. #LoadModule vhost_alias_module modules ...