此博客链接：
前言
在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>