纯CSS打造网页大白知识点：
     首先要把大白分割，整体baymax中包含header（eye1,eye2,mouth），torso（heart），belly（cover），l-bigfinger,r-bigfinger，l-smallfinger，r-smallfinger，l-leg，r-leg。
  1. 因为大白是白色，所以背景颜色（body）要设为深色。
  2. 大白居中，div居中要用margin：0  auto；
  3. 保险起见overflow：hidden
首先写head：
  1. 设置宽高之后以百分比定义圆角的形状   border-radius:50%
  2. margin-bottom设为负值，使身体与头部有重叠
  3. 因为只有设置了position 为relative absolute fixed 后 ，设置z-index才生效。并且z-index是相对于同一父亲元素的所有子元素的层级关系，z-index的值越大，说明他的位置越高。
             所以给头部设置position：relative，然后将层级z-index：100
其次写eye1,eye2:
  1. 用到旋转对称使左右眼对称，transform：rotate（**deg）与transform：rotate（-**deg）左右对称，左右手臂，左右手指，左右腿都会用到。
 
附代码：
 
<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <style>
           body{background: #595959;}
                #baymax{
auto;
px;
                }
                #head{
px;
px;
                     background-color: white;
%;
auto;
                      margin-bottom: -20px;
px solid #E0E0E0;
;
    /*生成相对定位的元素*/
                   position: relative;
                }
                #eye1{
px;
px;
                     background: black;
%;
                     position: absolute;
px;
px;
deg);
                }
                #eye2{
px;
px;
                     background: black;
%;
                     position: absolute;
                     transform: rotate(-8deg);
px;
px;
                }
                #mouth{
px;
px;
                     background: black;
                     position: absolute;
px;
px;
                     
                }
                #torso,#belly{
px;
px;
auto;
                     background: white;
%;
px solid #DCDCDC;
                     border-top: none ;
;
                }
                
                #belly{
px;
px;
                     margin-top: -145px;
                     position: relative;
;
                     }
                #cover{
px;
px;
auto;
                     background: white;
%;
                     position: relative;
                    top:-20px ;
                     }
                #heart{
px;
px;
%;
                     background: white;
px solid #DCDCDC;
px #ccc inset;
auto;
;
                     position: relative;
                    right:-40px;
px;
                     
                }
                #left-arm,#right-arm{
px;
px;
auto;
                     background: white;
%;
deg);
                     position: relative;
                     top: -270px;
                     left: -95px;
                }
                #right-arm{
                     transform:rotate(-23deg);
                     position: relative;
                     top: -490px;
px;
                }
                #l-bigfinger{
px;
px;
auto;
                     background: white;
%;
deg);
                     position: absolute;
px;
px;
                }
                #l-smallfinger{
px;
px;
auto;
                     background: white;
%;
deg);
                     position: absolute;
px;
px; 
                }
                
                #r-smallfinger{
px;
px;
auto;
                     background: white;
%;
                     transform:rotate(-125deg);
                     position: absolute;
px;
px;
                }
                #r-bigfinger{
px;
px;
auto;
                     background: white;
%;
                     transform:rotate(-125deg);
                     position: absolute;
px;
px;
                }
                #left-leg{
px;
px;
auto;
                     background: white;
%;
                     position: relative;
                     left: -40px;
                     top: -500px;
%;
                }
                #right-leg{
px;
px;
auto;
                     background: white;
%;
                     position: relative;
px;
                     top: -650px;
%;
                }
                
           </style>
     </head>
     <body>
           <div id="baymax">
           <div id="head">
                <div id="eye1"></div>
                <div id="eye2"></div>
                <div id="mouth"></div>
           </div>
           <div id="torso">
                <div id="heart"></div>
           </div>
           <div id="belly">
                <div id="cover"></div>
           </div>
           <div id="left-arm">
                <div id="l-bigfinger"></div>
                <div id="l-smallfinger"></div>
           </div>
           <div id="right-arm">
                <div id="r-bigfinger"></div>
                <div id="r-smallfinger"></div>
           </div>
           <div id="left-leg"></div>
           <div id="right-leg"></div>
     </div>     
     </body>
</html>

用纯CSS画大白的更多相关文章

  1. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  4. 【原创】纯CSS画黄金梅丽号！

    代码如下 <!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAni ...

  5. 纯CSS画的基本图形

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  6. 理解纯CSS画三角形

    pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...

  7. 8.17 纯css画一个着重号图标

    今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈 图标长这样: CSS代码: .hint{ display: inline-block; width: 20p ...

  8. 纯css 画气泡

    我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...

  9. 纯CSS画WP8界面

    我的手机是诺基亚920,13年4月份买的.工作之余,就想用css做一下WP8的界面效果,如上图所示.不做不知道,一做还挺难的.尤其是画那个QQ 的企鹅图标,太难画了.怎么画都不像. <!doct ...

随机推荐

  1. ccbpm工作流引擎是怎样支持多种流程模式的

    前言: 在BPM领域支持流程运转的理论模型有多种.有的21种.28种.32种. 每种模式都代表了这样的模式的理论设计者研究者的人员主张.思想.这些模式尽可能的,全然去覆盖到现实生产.工作.应用上的流程 ...

  2. Android多线程研究（2）——定时器

    先来看一段代码: public static void main(String[] args) { new Timer().schedule(new TimerTask() { @Override p ...

  3. 虚拟数据库_json_ajax

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. 在Visual Studio 中开发Office Add-in

    作者:陈希章 发表于2017年7月13日 "Talk is cheap, show me the code",我们就用代码来说话吧.这一篇将给大家介绍如何开始Office Add- ...

  5. Android DVM

    1.DVM(Dalvik Virtual Machine)概述 是Google公司自己设计用于Android平台的Java虚拟机 支持已经转化为.dex(及Dalvik Excutable)格式的Ja ...

  6. 带你深度解析Maven

    一.What`s Maven? Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工具,简单的说 ...

  7. springboot 热部署的两种方式

    问题的提出: 在编写代码的时候,你会发现我们只是简单把打印信息改变了,就需要重新部署,如果是这样的编码方式,那么我们估计一天下来就真的是打几个Hello World就下班了.那么如何解决热部署的问题呢 ...

  8. JMeter脚本java代码String数组要写成String[] args，不能写成String args[]，否则报错。

    JMeter脚本java代码String数组中括号要写在类型关键字后面,不能写在变量名后面.

  9. Robotframework-Appium系列：登录操作

    之前Appium的环境已经配置完成(参考Robotframework-Appium系列:安装配置),接下来就是如何使用Appium来完成我们的apk的测试工作. 一.环境准备 所需的软件列表如下 Ro ...

  10. Hive实际应用小结

    1.简介 Hive是数据仓库平台,构建在Hadoop之上用来处理结构化数据.Hive是一个SQL解析引擎,能够将SQL语句转化成MapReduce作业并在Hadoop上执行,从而使得查询和分析更加方便 ...