纯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. c++中虚多态的实现机制

    c++中虚多态的实现机制 參考博客:http://blog.csdn.net/neiloid/article/details/6934135 序言 证明vptr指针存在 无继承 单继承无覆盖 单继承有 ...

  2. vue-购物车

    最终的实现效果: 需求分析: 购物车需要展示一个已加入购物车的商品列表,包含商品名称,商品单价,购买数量和操作等信息,还需要实时显示购买的总价.其中购买数量可以增加或减少,每类商品还可以从购物车中移除 ...

  3. java宜立方商城项目

    宜立方商城项目 链接: https://pan.baidu.com/s/1c1SokzI 密码: z5cy 网上买的,资源是拿来共享,而不是来牟利的 框架:spring      设计模式      ...

  4. 【java设计模式】代理模式

    计算类中方法运行时间的几种方案: Client: package com.tn.proxy; public class Client { public static void main(String[ ...

  5. iOS NSString 文本不同的颜色 标题+文本字体大小 行间距／删除不需要的字符 ／以及自适应高度

    #import <Foundation/Foundation.h> @interface TextsForRow : NSObject @property(nonatomic,copy)N ...

  6. 创建一个可用的简单的SpringMVC项目，图文并茂

    转载麻烦注明下来源:http://www.cnblogs.com/silentdoer/articles/7134332.html,谢谢. 最近在自学SpringMVC,百度了很多资料都是比较老的,而 ...

  7. 【Uva10559】Blocks（区间DP）

    Description 题意:有一排数量为N的方块,每次可以把连续的相同颜色的区间消除,得到分数为区间长度的平方,然后左右两边连在一起,问最大分数为多少. \(1\leq N\leq200\) Sol ...

  8. 【Uva623】500！(高精)

    Description 求N! \(N \leq 1000\) Sample Input 10 30 50 100 Sample Output 10! 3628800 30! 265252859812 ...

  9. 如何安装mysql

    如何安装mysql对于初学者来说的确是很麻烦,首先要知道安装mysql仅仅只是安装一个mysql系统,是没有任何可视化操作界面的,所以还要安装一个mysql的管理工具,这是初学者容易蒙的地方之一. m ...

  10. ArcGIS 网络分析[2.2] 服务区分析

    什么是服务区? 我们先提一个很常见的社会现象:一个医院,如果要发起抢救,那么10分钟内能去多远? 时间就是生命,当结合道路网的阻力进行最短路径分析时,得到的可达的覆盖区域,这个区域就是服务区. 服务区 ...