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 ...
随机推荐
- session过期后自动跳转到登陆页
项目需要做一个自动登出的功能,查询了网上的资料,一开始准备用session监听做,按照下面方式配置监听器 1.在项目的web.xml文件中添加如下代码: <!--添加Session监听器--&g ...
- 【网络流#1】hdu 3549 - 最大流模板题
因为坑了无数次队友 要开始学习网络流了,先从基础的开始,嗯~ 这道题是最大流的模板题,用来测试模板好啦~ Edmonds_Karp模板 with 前向星 时间复杂度o(V*E^2) #include& ...
- 一个中高级PHP工程师所应该具备的能力
很多面试,很多人员能力要求都有“PHP高级工程师的字眼”,如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望给初级或已经达到中级的PHP工程师一些帮助. 一.平静 ...
- 03-StreamReader和StreamWriter的案例
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...
- Java数据库连接之配置ODBC数据源
java使用JDBC-ODBC桥接连接SQLServer数据库需要配置ODBC数据源,配置步骤如下: 1.进入控制面板,找到管理工具 2.看到ODBC数据源,有64位和32位的,如果你的数据库是64位 ...
- gc内存回收机制
判断哪些对象可回收 GC是通过对象是否存活来决定是否进行回收,判断对象是否存活主要有两种算法:引用计数算法.可达性分析算法 引用计数算法 引用计数的算法原理是给对象添加一个引用计数器,每被引用一次计数 ...
- wininet API调用，检测网络
[DllImport("wininet")] private extern static bool InternetGetConnectedState(out int ...
- 详解boost库中的Message Queue .
Message Queue(后文简写成MQ或消息队列)是boost库中用来封装进程间通信的一种实现,同一台机器上的进程或线程可以通过消息队列来进行通迅.消息队列中的消息由优先级.消息长度.消息数据三部 ...
- telnet简单操作 模拟请求
telnet简单操作 模拟请求 一: 二: 三: 按照以上操作即可!
- Delphi XE7 开发ActiveX 及在IntraWeb下调试
最近学习DelphiXE7下Intraweb开发,Intraweb完全服务器端运行使得FastReport报表系统无法在客户端运行,当然网上也有一大堆解决方案,例如导出到PDF后,给出连接,让客户点击 ...