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 ...
随机推荐
- 第二章：开始开发mod前你需要知道的一些事情
<基于1.8 Forge的Minecraft mod制作经验分享> 是的童鞋,别着急.不管我写的再认真也不可能面面俱到,那么如果遇到了什么问题怎么办呢?所以咱必须先掌握一些基础的东西,这样 ...
- -bash: ulimit: open files: cannot modify limit: Operation not permitted
普通用户登录系统报错,提示: -bash: ulimit: open files: cannot modify limit: Operation not permitted. 处理方法: #vi /e ...
- Asp.net中用户自定义控件 ascx的使用
使用ascx目的就是为了提高某部分功能的重复利用,我简单通过源代码说一下对它的参数的输入和数出. 我们以省市区三级连动为例子. vs2005下ascx页面的代码: <table width=&q ...
- python面对对象编程------3：写集合类的三种方法
写一个集合类的三种方法:wrap,extend,invent 一:包装一个集合类 class Deck: def __init__( self ): self._cards = [card6(r+1, ...
- 《CSS网站布局实录》学习笔记（三）
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
- 在iOS8下使用CLLocationManager定位服务需要系统授权
最近在ios8.0使用CLLocationManager定位服务,发现老不能定位,查看设置菜单中的项也是处于未知状态.想起之前都有一个弹出框提示用户是否允许定位,这次一直没有出现了.原来ios8.0下 ...
- gui小日历
package MyCal; import java.awt.EventQueue; import javax.swing.JFrame; import javax.swing.JPanel; imp ...
- CRT内存调试标记
static unsigned char _bNoMansLandFill = 0xFD; /* fill no-man's land with this */ static unsigned cha ...
- 学OpenGL的一些好的网站
好的资源太多,自己懂的太少,而今迈步从头越!!fighting...... 一些OpenGL资源链接 这是前几天自己简单整理的几个链接,希望对大家有用 顺便问一下http://www.spacesim ...
- jQuery自学笔记（一）：初识jQuery
jQuery 是一个 JavaScript 函数库, jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数,引用jQuery应该注意: <script&g ...