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 ...
随机推荐
- 第一章：在IDEA里搭建基于Forge的Minecraft mod开发环境
<基于1.8 Forge的Minecraft mod制作经验分享> 网上关于Forge开发环境搭建的文章其实有不少,但大都是基于Eclipse的. 作为用Java开发的环境,怎么能没有ID ...
- spring05配置文件之间的关系
一:配置文件包含关系 1.创建对应的实体类 public class Student { //学生实体类 private String name; //姓名 private Integer age; ...
- ASP.NET-FineUI开发实践-5
1.tree的右键事件和单击事件 页面就不写了,准备一个树和一个菜单控件,随便写点啥 JS:注意注释 var menuSettings = F('menuSettings'); var tree = ...
- jquery插件--多行文本缩略
1.webkit内核多行缩略样式 text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orie ...
- 用win32API 实现TextBox水印特效
demo效果:
- CSS中伪类的使用
原文:http://www.cnblogs.com/guopei/archive/2011/04/16/2017627.html 何为伪类? 也就是实际实现了类的效果,但是并没有实际添加到标签中的类, ...
- TFS统计编码行数语句
****** Script for SelectTopNRows command from SSMS ******/ SELECT TeamProjectProjectNodeName 项目名称 ,c ...
- UIWebView加载不了页面, 但在电脑的浏览器上可以打开
经排查, 系因为URL中包含有中文, 所以无法加载页面, 解决方法如下: 将URL进行转码 NSString *urlStr =[[NSString stringWithFormat:@"h ...
- css3表格隔行变色和表格选中变颜色代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Something About Variable
CONTENT(目录) 前言 Variable declearation:three rules you can break 1.Don't set var stat ...