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

于 2018-08-25 22:57:10 发布
阅读量235 收藏
点赞数
分类专栏： 项目日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40764744/article/details/82056325
版权
背景

大一上学期刚开学，我参加社团技术部的面试，一面顺利通过，二面的题目是完成一个代码任务，从前端、后端、安卓、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>
「已注销」
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值