纯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. Winform开发框架中工作流模块之审批会签操作(2)

    前面随笔介绍了请假申请单和报销申请单两个不同的业务表单的流程处理,一个是单表信息,一个包含明细的主从表信息,后者包含了条件流程的处理,在流程审批中,一般还有一种流程处理就是会签的操作,会签处理是几个审 ...

  2. 自学Zabbix3.10.1-事件通知Notifications upon events-媒介类型

    自学Zabbix3.10-事件通知Notifications upon events-媒介类型 zabbix触发器到了要发送通知的情况下,需要一个中间介质来接收并传递它的消息给运维们,以往用nagio ...

  3. 利用GDAL进行工具开源化改造

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 为利于项目实施,团队用AE写过一个插件式的工具集,主要包括了数 ...

  4. 环境变量配置文件，本地登录前提示信息/etc/issue

    让配置文件立即生效:source 配置文件 或 . 配置文件 /etc/profile 例:定义了HISTSIZE=1000 /etc/profile.d/*.sh /etc/bashrc ~/.ba ...

  5. 【Jenkins】Jenkins权威指南英文版：jenkins-the-definitive-guide.pdf

    原文链接:http://www.bogotobogo.com/DevOps/Jenkins/images/Intro_install/jenkins-the-definitive-guide.pdf

  6. springboot 入门八-自定义配置信息（编码、拦截器、静态资源等）

    若想实际自定义相关配置,只需要继承WebMvcConfigurerAdapter.WebMvcConfigurerAdapter定义些空方法用来重写项目需要用到的WebMvcConfigure实现.具 ...

  7. HTML状态码大全（301,404,500等）

    HTML状态码大全(301,404,500等)HTML状态码大全(301,404,500等)HTML状态码大全(301,404,500等)HTML状态码大全(301,404,500等) 这些状态码被分 ...

  8. iOS 判断数组array中是否包含元素a，取出a在array中的下标+数组方法详解

    目前找到来4个解决办法,第三个尤为简单方便 NSArray * arr = @["]; //是否包含 "]) { NSInteger index = [arr indexOfObj ...

  9. iOS 内存泄漏排查以及处理

    使用Xcode7的Instruments检测解决iOS内存泄露   文/笨笨的糯糯(简书作者)原文链接:http://www.jianshu.com/p/0837331875f0作为一名iOS开发攻城 ...

  10. 理解Kubernetes（1）：手工搭建Kubernetes测试环境

    系列文章: 1. 手工搭建环境 1. 基础环境准备 准备 3个Ubuntu节点,操作系统版本为 16.04,并做好以下配置: 系统升级 设置 /etc/hosts 文件,保持一致 设置从 0 节点上无 ...