纯CSS打造网页大白知识点：
首先要把大白分割，整体baymax中包含header（eye1,eye2,mouth），torso（heart），belly（cover），l-bigfinger,r-bigfinger，l-smallfinger，r-smallfinger，l-leg，r-leg。
- 因为大白是白色，所以背景颜色（body）要设为深色。
- 大白居中，div居中要用margin：0 auto；
- 保险起见overflow：hidden
首先写head：
- 设置宽高之后以百分比定义圆角的形状 border-radius:50%
- margin-bottom设为负值，使身体与头部有重叠
- 因为只有设置了position 为relative absolute fixed 后 ，设置z-index才生效。并且z-index是相对于同一父亲元素的所有子元素的层级关系，z-index的值越大，说明他的位置越高。
所以给头部设置position：relative，然后将层级z-index：100
其次写eye1,eye2:
- 用到旋转对称使左右眼对称，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>