纯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. java 拦截器

    一.前言 这是一篇关于 java 拦截器的文章,是我的写 java  web 所遇见的问题.当我们写好一个网站,必须要通过登陆页面才可以进入这个系统.那么我们就得写个 java 拦截器,如果是通过登录 ...

  2. iOS开发富文本制作 图片和文字/NSMutableParagraphStyle／NSMutableAttributedString

    /NSMutableParagraphStyle/NSMutableAttributedString 组合使 NSString * titlestr=@"日产GT-R"; NSMu ...

  3. jQuery 最外面的那层皮

    这次学习 jQuery 源码,基于当前最新的版本,3.2.1. IIFE (function() { 'use strict'; // })(); 定义一个匿名函数并立即执行,得益于 javascri ...

  4. 推荐：让你快速搞定各服务端（api,pc,mobile,wechat）代码

    如果你在写服务端 (PHP) ,会因为项目须求(做app.pc.mobiel.微信) 而写几套代码的,你不觉得很累吗? 现在的很多开源框架商用版本在做程序方面都是这么一套一套的,维护起来,二开起来特别 ...

  5. 使用Vue2完成“小红书” app

    小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...

  6. bzoj 4198: [Noi2015]荷马史诗

    Description 追逐影子的人,自己就是影子. --荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读她爱不释手的<荷马史诗>.但是由& ...

  7. BOOTPROTO=[none|static|bootp|dhcp]（引导时不使用协议|静态分配|BOOTP协议|DHCP协议）

     BOOTPROTO=[none|static|bootp|dhcp](引导时不使用协议|静态分配|BOOTP协议|DHCP协议) 

  8. python：发送消息给微信企业号

    # -*- coding:utf-8 -*- import requests import json ''' 基础环境:微信企业号 version:python 2.7 ''' class Send_ ...

  9. 3.Nginx常用功能介绍

    Nginx常用功能介绍 Nginx反向代理应用实例 反向代理(Reverse Proxy)方式是指通过代理服务器来接受Internet上的连接请求,然后将请求转发给内部网络上的服务器,并且从内部网络服 ...

  10. golang社区

    a development list for Go Programming Language https://groups.google.com/forum/#!forum/golang-dev a ...