实验楼笔记-大白

此博客链接：

前言

在vs conde中，在英文状态下，输入！，然后按tab键可以自动生成html代码。

 同时按住shift和alt键加上b可以快捷在浏览器中浏览效果。

创建大白

存在

先搭建大白的框架，使大白真实存在。

1.先用html搭建大白的框架。

<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>
         <!-- 肚子 ，包括和心脏连接的部分-->
         <div id="belly">
            <div id="cover"></div>
        </div >
         <!-- 左臂 ，包括大小手指-->
        <div id="lef-arm">
            <div id="l-bigfinger"></div>
            <div id="l-smallfinger"></div>
        </div>
         <!-- 右臂 ，包括大小手指-->
         <div id="rigth-arm">
            <div id="r-bigfinger"></div>
            <div id="r-smallfinger"></div>
        </div>
         <!-- 腿，包括左右腿-->
        <div id="left-leg"></div>
        <div id="right-leg"></div>
    </div>

进化

1.使用body把大白的身体颜色设置为深色（这里是整体的样式，大白的所有部分都会使用这个身体）

body{
            background: 495959;
            
        }

2.设置大白的头部。

/* //头部 */
        #head{
             height: 64px;
              100px;
             border-radius: 50%;
             background: #f7f5f5;
             margin: 0 auto;
             /* //感觉这个也没有什么用呢 */
             margin-bottom: -20px;
             border-bottom: 5px solid #e0e0e0;
             z-index: 100;
             position: relative;
        }

　　效果

3.设置大白的两个眼睛。这里我一直以为左眼和右眼对称设置参数就可以了，但是发现top值设置成一样就不对称了。

 #eye{
             height: 11px;
              13px;
             border-radius: 50%;
             background: #0e0101;
             position: relative;
             left:68px;
             top:27px;
        }
        /* 左眼 */
        #eye2{
             height: 11px;
              13px;
             border-radius: 50%;
             background: #0e0101;
             position: relative;
             left: 15px;
             top:17px;
        }

　效果

　

 4.设置嘴

 #mouth{
             52px;
            height: 1.5px;
            border-bottom: solid;
            position: relative;
            left: 28px;
            top:10px;
        }

效果

5.设置胸部

#torso{
            height: 110px;
             130px;
            background: #f7f5f5;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;

        }

　　效果

 6.设置肚子

 #belly{
            height: 180px;
             160px;
            background: #f7f5f5;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;
            /* /* top:10px; */
            margin-top: -50px;
        } 

效果

 7.添加心脏

#heart{
            height: 20px;
             20px;
            top:46px;
            border-radius: 50%;
            background:  #e61616;
            left:72px;
            position: relative;
            z-index: 100;
            box-shadow: 2px #ccc inset;
            border: 1px solid #ccc;
        }

效果

 8.添加手臂

#lef-arm{
            height: 150px;
             90px;
            background: #f7f5f5;
            border-radius: 100% 75%;
            position: relative; 
            margin: 0 auto;
            margin-right: 651px;
            margin-top: -175px;
            /* left:2px; */
        }
        #rigth-arm{
            height: 150px;
             90px;
            background: #f7f5f5;
            border-radius: 75% 100% ;
            position: relative; 
            margin: 0 auto;
            margin-right: 504px;
            margin-top: -152px;
            /* left:2px; */
        }

　　

 9添加大腿

 #left-leg{
           70px;
          height: 120px;
          background: #f7f5f5;
          border-radius: 75% 100% 100% 75%;
          position: relative; 
          margin: 0 auto;
          margin-right: 540px;
          margin-top: -50px;

        }
        #right-leg{
           70px;
          height: 120px;
          background: #f7f5f5;
          border-radius: 75% 75% 100% 100%;
          position: relative; 
          margin: 0 auto;
          margin-right: 613px;
          margin-top: -120px;
        }

　　

 然后长的不好看的大白就完成了。

 附件完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* //整体的身体 */
        body{
            background: 495959;
            
        }
/* 这个感觉没有什么必要 */
        #baymax{
            margin: 0 auto;
            height: 600px;
            /* overflow: hidden; */
        }
        /* //头部 */
        #head{
             height: 64px;
              100px;
             border-radius: 50%;
             background: #f7f5f5;
             margin: 0 auto;
             /* /* //感觉这个也没有什么用呢 */
              margin-bottom: -20px; 
             /* 双下巴 */
             border-bottom: 5px solid #e0e0e0;
             z-index: 100;
             position: relative;
        }
        /* 右眼 */
         #eye{
             height: 11px;
              13px;
             border-radius: 50%;
             background: #0e0101;
             position: relative;
             left:68px;
             top:27px;
        }
        /* 左眼 */ 
         #eye2{
             height: 11px;
              13px;
             border-radius: 50%;
             background: #0e0101;
             position: relative;
             left: 15px;
             top:17px;
        } 
        #mouth{
             52px;
            height: 1.5px;
            border-bottom: solid;
            position: relative;
            left: 28px;
            top:10px;
        }
        /* 胸部 */
        #torso{
            height: 110px;
             130px;
            background: #f7f5f5;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;

        }
        #heart{
            height: 20px;
             20px;
            top:46px;
            border-radius: 50%;
            background:  #e61616;
            left:72px;
            position: relative;
            z-index: 100;
            box-shadow: 2px #ccc inset;
            border: 1px solid #ccc;
        }
        /* 肚子 */
        #belly{
            height: 185px;
             165px;
            background: #f7f5f5;
            border-radius: 50%;
            margin: 0 auto;
            position: relative;
            /* /* top:10px; */
            margin-top: -50px;
        } 
        /* #lef-arm{
             height: 120px;
              2px;
             position: relative; 
             margin: 0 auto;
             background: #0f0d0d;
             margin-right: 512px;
             margin-top: -175px;
             transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

        }
        #rigth-arm{
             height: 120px;
              2px;
             position: relative; 
             margin: 0 auto;
             background: #0f0d0d;
             margin-right: 730px;
             margin-top: -134px;
             transform: rotateX(135deg) rotateY(135deg) rotateZ(135deg);

        } */
         #lef-arm{
            height: 150px;
             90px;
            background: #f7f5f5;
            border-radius: 100% 75%;
            position: relative; 
            margin: 0 auto;
            margin-right: 647px;
            margin-top: -175px;
             
       }
        #l-bigfinger{

        }
        #rigth-arm{
            height: 150px;
             90px;
            background: #f7f5f5;
            border-radius: 75% 100% ;
            position: relative; 
            margin: 0 auto;
            margin-right: 504px;
            margin-top: -152px;
            
        } 
        #left-leg{
           70px;
          height: 120px;
          background: #f7f5f5;
          border-radius: 75% 100% 100% 75%;
          position: relative; 
          margin: 0 auto;
          margin-right: 540px;
          margin-top: -50px;

        } 
        #right-leg{
           70px;
          height: 120px;
          background: #f7f5f5;
          border-radius: 75% 75% 100% 100%;
          position: relative; 
          margin: 0 auto;
          margin-right: 613px;
          margin-top: -120px;
        } 
        
    </style>
</head>
<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>
         <!-- 肚子 ，包括和心脏连接的部分-->
         <div id="belly">
            <div id="cover"></div>
        </div >
         <!-- 左臂 ，包括大小手指-->
        <div id="lef-arm">
            <div id="l-bigfinger"></div>
            <div id="l-smallfinger"></div>
        </div>
         <!-- 右臂 ，包括大小手指-->
         <div id="rigth-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>