纯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. Git（一）之基本操作详解

    前言 在这段时间的工作中一直都是用Git作为版本控制,只是知道简单的几个命令,没有去了解它的内部原理.所以周末有时间来系统学习. 现在的公司基本上都是用Git作为版本控制,当然也有SVN的. Git是 ...

  2. es6+require混合开发，兼容es6 module，import,export之 加载css及公用date-main

    大家好!上篇文章已经介绍了搭建文件夹,以及加载js文件.现在讲一下加载css ,以及对baseUrl的理解 1.对项目结构的认知 一个项目的结构是根据项目的架构来决定的,当然也可以做到更智能,但是意义 ...

  3. Intellijidea建javaWeb以及Servlet简单实现

    一.创建并设置javaweb工程1.创建javaweb工程File --> New --> Project... 点击Project后出现如下界面,选择Java Enterprise,选中 ...

  4. 详解MongoDB管理命令

    MongoDB是一个NoSQL数据库系统:一个数据库可以包含多个集合(Collection),每个集合对应于关系数据库中的表:而每个集合中可以存储一组由列标识的记录,列是可以自由定义的,非常灵活,由一 ...

  5. 《CLR via C#(第4版)》【PDF】下载

    <CLR via C#(第4版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382189 via C#(第4版)>[PD ...

  6. 切换用户，显示用户名， 调用Windows系统命令

    CONN 用户名/密码 CONN sys/密码 AS SYSDBA | SYSOPER SHOW USER SELECT * FROM 用户名.表名; 调用Windows系统命令: HOST Wind ...

  7. 【CSS3】文本属性

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. web基础笔记整理(一)

    一.程序的分层 1.界面层: 某种类型的应用程序 a.DOS(控制台运行) b.桌面应用程序--独立安装,独立运行 c.web类型--现在流行的 单机版:电脑上要安装,程序升级之后,电脑上也要升级-- ...

  9. locate 命令详解

    locate :http://www.cnblogs.com/peida/archive/2012/11/12/2765750.html 作用:locate命令可以在搜寻数据库时快速找到档案,数据库由 ...

  10. PHP call_user_func

    <?php function my_call_back_function(){ echo "hello world!"; } class MyClass{ static fu ...