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 ...
随机推荐
- Oracle数据库配置方式二--使用Net Manager配置数据库
在Oracle安装配置中使用Net Configuration配置了数据库,今天给大家介绍第二种配置方式,Net Manager配置. 先找到我们的Net Manager的快捷方式,如下面截图
- FileUpload 简单上传+小预览
页面代码 : <form id="form1" runat="server"> <div> <asp:FileUpload ID= ...
- PHP对表单提交特殊字符的过滤和处理
PHP关于表单提交特殊字符的处理方法做个汇总,主要涉及htmlspecialchars/addslashes/stripslashes/strip_tags/mysql_real_escape_str ...
- java制作简单的坦克大战
坦克大战是我们小时候玩红白机时代的经典游戏,看到有不少小伙伴都使用各种语言实现了一下,手痒痒,也使用java做的一个比较简单的坦克大战,主要面向于学过Java的人群,与学了一段时间的人,有利于面向对象 ...
- 【转】常用背景色RGB数值
[转自]http://blog.sina.com.cn/s/blog_8fc890a201013z8h.html
- Flume 1.4.0 User Guide
Apache Flume is a distributed, reliable, and available system for efficiently collecting, aggregatin ...
- Phpcms V9全站伪静态设置方法
为什么要伪静态?具体在这里就不说了,你懂的!一方面更新修改后不需要生成静态文件,另一方面为了SEO! 访问规则如下 1 2 list-{$catid}-{$page}.html content-{$c ...
- Spark保存到HDFS或本地文件相关问题
spark中saveAsTextFile如何最终生成一个文件 http://www.lxway.com/641062624.htm 一般而言,saveAsTextFile会按照执行task的多少生成多 ...
- angular controller js 压缩后报错解决方案
简单介绍下ng-annotate这个项目,这个项目正好提供了gulp的插件. gulp配置文件: var gulp = require('gulp'); var ngAnnotate = requir ...
- node.js相关
node node最大的特点是单线程,因此一个只能有一个任务运行,大量采用异步操作. 某一个任务的后续操作一般采用回调函数的形式 var callback = function (error, val ...