此博客链接:
前言
在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; width: 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; width: 13px; border-radius: 50%; background: #0e0101; position: relative; left:68px; top:27px; } /* 左眼 */ #eye2{ height: 11px; width: 13px; border-radius: 50%; background: #0e0101; position: relative; left: 15px; top:17px; }
效果
4.设置嘴
#mouth{ width: 52px; height: 1.5px; border-bottom: solid; position: relative; left: 28px; top:10px; }
效果
5.设置胸部
#torso{ height: 110px; width: 130px; background: #f7f5f5; border-radius: 50%; margin: 0 auto; position: relative; }
效果
6.设置肚子
#belly{ height: 180px; width: 160px; background: #f7f5f5; border-radius: 50%; margin: 0 auto; position: relative; /* /* top:10px; */ margin-top: -50px; }
效果
7.添加心脏
#heart{ height: 20px; width: 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; width: 90px; background: #f7f5f5; border-radius: 100% 75%; position: relative; margin: 0 auto; margin-right: 651px; margin-top: -175px; /* left:2px; */ } #rigth-arm{ height: 150px; width: 90px; background: #f7f5f5; border-radius: 75% 100% ; position: relative; margin: 0 auto; margin-right: 504px; margin-top: -152px; /* left:2px; */ }
9添加大腿
#left-leg{ width: 70px; height: 120px; background: #f7f5f5; border-radius: 75% 100% 100% 75%; position: relative; margin: 0 auto; margin-right: 540px; margin-top: -50px; } #right-leg{ width: 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; width: 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; width: 13px; border-radius: 50%; background: #0e0101; position: relative; left:68px; top:27px; } /* 左眼 */ #eye2{ height: 11px; width: 13px; border-radius: 50%; background: #0e0101; position: relative; left: 15px; top:17px; } #mouth{ width: 52px; height: 1.5px; border-bottom: solid; position: relative; left: 28px; top:10px; } /* 胸部 */ #torso{ height: 110px; width: 130px; background: #f7f5f5; border-radius: 50%; margin: 0 auto; position: relative; } #heart{ height: 20px; width: 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; width: 165px; background: #f7f5f5; border-radius: 50%; margin: 0 auto; position: relative; /* /* top:10px; */ margin-top: -50px; } /* #lef-arm{ height: 120px; width: 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; width: 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; width: 90px; background: #f7f5f5; border-radius: 100% 75%; position: relative; margin: 0 auto; margin-right: 647px; margin-top: -175px; } #l-bigfinger{ } #rigth-arm{ height: 150px; width: 90px; background: #f7f5f5; border-radius: 75% 100% ; position: relative; margin: 0 auto; margin-right: 504px; margin-top: -152px; } #left-leg{ width: 70px; height: 120px; background: #f7f5f5; border-radius: 75% 100% 100% 75%; position: relative; margin: 0 auto; margin-right: 540px; margin-top: -50px; } #right-leg{ width: 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>