社团面试任务：用CSS绘制图画（三只小虫图）

本文主要是介绍社团面试任务：用CSS绘制图画（三只小虫图），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景

大一上学期刚开学，我参加社团技术部的面试，一面顺利通过，二面的题目是完成一个代码任务，从前端、后端、安卓、ios、运维五个题目中挑选一个做。我选择了前端的任务，算是拉开了我在社团学习和进行前端开发的序幕。

过程

第一次接触前端，连C语言都不会的我，利用国庆假期开始自学HTML和CSS，看了教程和网课，自认为已经过了一遍基础知识，但没想到对画图的任务却一点头绪都没有。

我去搜索使用HTML画图的关键词，搜索到了Canvas画布这个东西，于是我开始学习，并尝试着去画，但发现实在是过于复杂（当时感觉），于是还是求助社团面试负责人于思路，我以为自己使用Canvas的方式错了，但实际上根本不需要Canvas。他很惊讶我要使用Canvas，告诉我使用CSS就足够了，这时我才意识到使用对div块进行形状和颜色的修改来拼接成简单图形这个思路。

成果

使用css实现了下面这个简单的图画
这里写图片描述

总结

一开始的入门，从完全没有接触过代码，到写出来一个东西，我当时非常开心。但现在看来，当时的入门自学效率不是很好，有很多遗留和一知半解的地方。但我为自己的毅力感到欣慰和感动。

代码

代码有600多行，是因为不懂id和class的区别每个样式都新定义一边，不懂得任何布局操作，不懂相对定位和绝对定位的区别。因为觉得绝对定位这种傻瓜用法太好用了，所以所有的定位都是用肉眼观察，绝对定位一点一点确定位置的。现在想起来真是傻的可爱。
这里就全部贴出来了

<!DOCTYPE html>
<html>
<head> 
<style type="text/css">
table,tr,td{border:7px solid #6d5999}
table{border-collapse:collapse}
table{width:475px}
table{height:100px}
td{padding:60px}
.circle1 { width: 72px;height: 72px;background: #6d5999;border-radius: 36px;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(4deg);/*Firefox*/
} 
.circle1{
position:absolute;
left:349px;
top:72px;
}.ground1{width:64px;height:64px;background:white;border-radius:32px;}.ground1{position:absolute;left:353px;top:76px;}.middle1{width: 4px;height: 40px;background: #6d5999;border-radius:2px;}.middle1{position:absolute;left:383px;top:104px;}.partcircle1{width:56px;height:20px;background:#6d5999;border-radius:28px 28px 0 0;}.partcircle1{position:absolute;left:357px;top:74px;}.smallcir1{width:30px;height:30px;background:#6d5999;border-radius:30px;}.smallcir1{position:absolute;left:370px;top:62px;}.leftpoint1{width:14px;height:14px;background:#6d5999;border-radius:14px;}.leftpoint1{position:absolute;left:362px;top:110px;}.rightpoint1{width:14px;height:14px;background:#6d5999;border-radius:14px;}.rightpoint1{position:absolute;left:394px;top:110px;}.leftline1{width:17px;height:4px;background:#6d5999;}.leftline1{position:absolute;left:333px;top:110px;border-radius:2px;}.rightline1{width:17px;height:4px;background:#6d5999;}.rightline1{position:absolute;left:418px;top:110px;border-radius:2px;}.upleftline1{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.upleftline1{position:absolute;left:340px;top:84px;border-radius:2px;}.uprightline1{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.uprightline1{position:absolute;left:413px;top:84px;border-radius:2px;}.downleftline1{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.downleftline1{position:absolute;left:342px;top:134px;border-radius:2px;}.downrightline1{position:absolute;left:413px;top:84px;border-radius:2px;}.downrightline1{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.downrightline1{position:absolute;left:410px;top:134px;border-radius:2px;}.leftheadline1{width:14px;height:3px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.leftheadline1{position:absolute;left:364px;top:60px;border-radius:2px;}.rightheadline1{width:14px;height:3px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.rightheadline1{position:absolute;left:392px;top:60px;border-radius:2px;}.leftheadpoint1{width:12px;height:12px;background:#6d5999;border-radius:12px;}.leftheadpoint1{position:absolute;left:360px;top:50px;}.rightheadpoint1{width:12px;height:12px;background:#6d5999;border-radius:12px;}.rightheadpoint1{position:absolute;left:398px;top:50px;}.circle2 { width: 72px;height: 72px;background: #6d5999;border-radius: 36px;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(4deg);/*Firefox*/} .circle2{position:absolute;left:210px;top:220px;
}.ground2{width:64px;height:64px;background:white;border-radius:32px;}.ground2{position:absolute;left:214px;top:224px;}.middle2{width: 4px;height: 40px;background: #6d5999;border-radius:2px;}.middle2{position:absolute;left:244px;top:252px;}.partcircle2{width:56px;height:20px;background:#6d5999;border-radius:28px 28px 0 0;}.partcircle2{position:absolute;left:218px;top:222px;}.smallcir2{width:30px;height:30px;background:#6d5999;border-radius:30px;}.smallcir2{position:absolute;left:231px;top:210px;}.leftpoint2{width:14px;height:14px;background:#6d5999;border-radius:14px;}.leftpoint2{position:absolute;left:223px;top:258px;}.rightpoint2{width:14px;height:14px;background:#6d5999;border-radius:14px;}.rightpoint2{position:absolute;left:255px;top:258px;}.leftline2{width:17px;height:4px;background:#6d5999;}.leftline2{position:absolute;left:194px;top:258px;border-radius:2px;}.rightline2{width:17px;height:4px;background:#6d5999;}.rightline2{position:absolute;left:279px;top:258px;border-radius:2px;}.upleftline2{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.upleftline2{position:absolute;left:201px;top:232px;border-radius:2px;}.uprightline2{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.uprightline2{position:absolute;left:274px;top:232px;border-radius:2px;}.downleftline2{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.downleftline2{position:absolute;left:203px;top:280px;border-radius:2px;}.downrightline2{position:absolute;left:274px;top:232px;border-radius:2px;}.downrightline2{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.downrightline2{position:absolute;left:271px;top:282px;border-radius:2px;}.leftheadline2{width:14px;height:3px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.leftheadline2{position:absolute;left:225px;top:210px;border-radius:2px;}.rightheadline2{width:14px;height:3px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.rightheadline2{position:absolute;left:253px;top:208px;border-radius:2px;}.leftheadpoint2{width:12px;height:12px;background:#6d5999;border-radius:12px;}.leftheadpoint2{position:absolute;left:221px;top:198px;}.rightheadpoint2{width:12px;height:12px;background:#6d5999;border-radius:12px;}.rightheadpoint2{position:absolute;left:259px;top:198px;}.circle3 { width: 72px;height: 72px;background: #6d5999;border-radius: 36px;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(4deg);/*Firefox*/} .circle3{
position:absolute;
left:70px;
top:370px;
}.ground3{width:64px;height:64px;background:white;border-radius:32px;}.ground3{position:absolute;left:74px;top:374px;}.middle3{width: 4px;height: 40px;background: #6d5999;border-radius:2px;}.middle3{position:absolute;left:104px;top:402px;}.partcircle3{width:56px;height:20px;background:#6d5999;border-radius:28px 28px 0 0;}.partcircle3{position:absolute;left:78px;top:372px;}.smallcir3{width:30px;height:30px;background:#6d5999;border-radius:30px;}.smallcir3{position:absolute;left:91px;top:360px;}.leftpoint3{width:14px;height:14px;background:#6d5999;border-radius:14px;}.leftpoint3{position:absolute;left:83px;top:408px;}.rightpoint3{width:14px;height:14px;background:#6d5999;border-radius:14px;}.rightpoint3{position:absolute;left:115px;top:408px;}.leftline3{width:17px;height:4px;background:#6d5999;}.leftline3{position:absolute;left:54px;top:408px;border-radius:2px;}.rightline3{width:17px;height:4px;background:#6d5999;}.rightline3{position:absolute;left:139px;top:408px;border-radius:2px;}.upleftline3{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.upleftline3{position:absolute;left:61px;top:382px;border-radius:2px;}.uprightline3{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.uprightline3{position:absolute;left:134px;top:382px;border-radius:2px;}.downleftline3{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.downleftline3{position:absolute;left:63px;top:430px;border-radius:2px;}.downrightline3{position:absolute;left:134px;top:382px;border-radius:2px;}.downrightline3{width:17px;height:4px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.downrightline3{position:absolute;left:131px;top:432px;border-radius:2px;}.leftheadline3{width:14px;height:3px;background:#6d5999;-webkit-transform: rotate(45deg);/*Google Chrome*/-moz-transform: rotate(45deg);/*Firefox*/}.leftheadline3{position:absolute;left:85px;top:360px;border-radius:2px;}.rightheadline3{width:14px;height:3px;background:#6d5999;-webkit-transform: rotate(135deg);/*Google Chrome*/-moz-transform: rotate(135deg);/*Firefox*/}.rightheadline3{position:absolute;left:113px;top:358px;border-radius:2px;}.leftheadpoint3{width:12px;height:12px;background:#6d5999;border-radius:12px;}.leftheadpoint3{position:absolute;left:81px;top:348px;}.rightheadpoint3{width:12px;height:12px;background:#6d5999;border-radius:12px;}.rightheadpoint3{position:absolute;left:119px;top:348px;}</style>
</head>
<body><table border="5"><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr></table><div class="circle1"></div><div class="ground1"></div><div class="middle1"></div><div class="partcircle1"></div><div class="smallcir1"></div><div class="leftpoint1"></div><div class="rightpoint1"></div><div class="leftline1"></div><div class="rightline1"></div><div class="upleftline1"></div><div class="uprightline1"></div><div class="downleftline1"></div><div class="downrightline1"></div><div class="leftheadline1"></div><div class="rightheadline1"></div><div class="leftheadpoint1"></div><div class="rightheadpoint1"></div><div class="circle2"></div><div class="ground2"></div><div class="middle2"></div><div class="partcircle2"></div><div class="smallcir2"></div><div class="leftpoint2"></div><div class="rightpoint2"></div><div class="leftline2"></div><div class="rightline2"></div><div class="upleftline2"></div><div class="uprightline2"></div><div class="downleftline2"></div><div class="downrightline2"></div><div class="leftheadline2"></div><div class="rightheadline2"></div><div class="leftheadpoint2"></div><div class="rightheadpoint2"></div><div class="circle3"></div><div class="ground3"></div><div class="middle3"></div><div class="partcircle3"></div><div class="smallcir3"></div><div class="leftpoint3"></div><div class="rightpoint3"></div><div class="leftline3"></div><div class="rightline3"></div><div class="upleftline3"></div><div class="uprightline3"></div><div class="downleftline3"></div><div class="downrightline3"></div><div class="leftheadline3"></div><div class="rightheadline3"></div><div class="leftheadpoint3"></div><div class="rightheadpoint3"></div></body>
</html>

这篇关于社团面试任务：用CSS绘制图画（三只小虫图）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！