Html+Css大白兔

css样式
/*由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。*/
body { background: #595959; } 

baymax{ /*设置为 居中*/ margin: 0 auto;
     /*高度*/ height: 600px; 
    /*隐藏溢出*/ overflow: hidden; }

#head{ height: 64px;
     width: 100px; 
     /*以百分比定义圆角的形状*/ border-radius: 50%;
    /*背景*/ background: #fff;
    margin: 0 auto;
    margin-bottom: -20px;
    /*设置下边框的样式*/ border-bottom: 5px solid #e0e0e0; 
    /*属性设置元素的堆叠顺序； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素
    的前面*/ z-index: 100;
    /*生成相对定位的元素*/ position: relative; }
眼睛
 #eye, #eye2{ 
 width: 11px;
 height: 13px; 
 background: #282828; 
 border-radius: 50%;
 position: relative; top: 30px; left: 27px; 
 /*旋转该元素*/ transform: rotate(8deg); } 

#eye2{ 
/*使其旋转对称*/ transform: rotate(-8deg);
 left: 69px;
top: 17px; } 

 #mouth{ width: 38px;
 height: 1.5px; 
 background: #282828;
 position: relative; 
 left: 34px;
 top: 10px; }
接下来是躯干和腹部：
#torso, #belly{ 
margin: 0 auto;
height: 200px;
width: 180px; 
background: #fff;
border-radius: 47%;
/*设置边框*/ border: 5px solid #e0e0e0;
border-top: none; z-index: 1; 
 } 

 #belly{
height: 300px;
width: 245px;
margin-top: -140px; 
z-index: 5; 
} 
 #cover{ 
 width: 190px; 
 background: #fff;
 height: 150px; 
 margin: 0 auto; 
 position: relative; 
 top: -20px; 
 border-radius: 50%; 
}
 赋予「大白」象征生命的心脏：
 #heart{
 width:25px; 
  height:25px;
border-radius:50%; 
position:relative;
  /*向边框四周添加阴影效果*/ box-shadow:2px 5px 2px #ccc inset; 
  right:-115px;
top:40px; 
 z-index:111;
 border:1px solid #ccc; }
 还没有手和脚，怪萌怪萌的...「大白」需要温暖的手臂：
 #left-arm, #right-arm{ 
 height: 270px; 
 width: 120px;


  #right-arm{
  transform: rotate(-20deg);
  left: 100px;
 top: -620px; }
 还没有手指头呢：
 #l-bigfinger, #r-bigfinger{ 
height: 50px; 
width: 20px; 
border-radius: 50%;
background: #fff;
position: relative;
top: 250px; 
left: 50px;
transform: rotate(-50deg); } 

#r-bigfinger{ left: 50px; transform: rotate(50deg); }

#l-smallfinger, #r-smallfinger{
height: 35px;
width: 15px; 
border-radius: 50%; 
background: #fff;  
position: relative; top: 195px; left: 66px; 
transform: rotate(-40deg); 
} 

#r-smallfinger{
background: #fff; 
transform: rotate(40deg); 
top: 195px; 
left: 37px;
}
迫不及待要给「大白」加上腿了吧：
#left-leg, #right-leg{
height: 170px; 
width: 90px; 
border-radius: 40% 30% 10px 45%;
background: #fff; position: relative;
top: -640px; left: -45px; 
transform: rotate(-1deg);
z-index: -2; margin: 0 auto;
 } 
#right-leg{
background: #fff; 
border-radius:30% 40% 45% 10px;
margin: 0 auto;
top: -810px;
left: 50px; 
transform: rotate(1deg); 
} 
body布局
<div id="baymax"> 
 <!-- 定义头部，包括两个眼睛、嘴 --> 
 <div id="head">
    <div id="eye"></div>
    <div id="eye2"></div>
    <div id="mouth"></div> 
</div>

<!-- 定义躯干，包括心脏 -->
<div id="torso"> 
    <div id="heart"></div> 
</div> 


<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
 <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>