mCard | 青训营主题创作当青训营遇上码上掘金。名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非

当青训营遇上码上掘金

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。该作品选择的主题是“我的名片”。

码上掘金作品链接

创作灵感

简历是一张名片，是让人们用最短的时间认识你的途径。简历中应包含岗位、薪资、教育经历、项目经历、工作经历、奖状证书等。在求职的场景里，应针对性地提取内容进行展示以满足效率的意义。

作为一名即将大四的学生来说，学习如何制作和包装建立是非常必要的。好的简历应能准确地提炼出相应的优势，一是从自我情况出发，在茫茫招聘海洋中，明确更加匹配的职业目标；二是让HR能用最快的时间识别应聘人员的胜任力评估。

该项目作品仅简单展示简历中的部分内容。

创作过程

1.修改全局样式，使盒子尺寸更方便调整。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}

2.创建一个水平居中的大盒子，包裹全部元素，采用flex布局的方式使子元素水平分布。

<div id="app">
    <div class="left">

    </div>
    <div class="right">

    </div>
</div>

#app {
    height: 660px;
    width: 1100px;
    margin: 11px auto;
    padding: 20px;
    display: flex;
    background-color: rgb(245, 245, 245);
    border: 1px solid #CCC;
    border-radius: 15px;
    box-shadow: 0 0 10px #DDD;

    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.left {
    flex: 2;
}
.right {
    flex: 3;
}

3.添加左侧的图片、联系方式和职业技能等信息。

<div class="left">
    <img src="https://pic1.zhimg.com/v2-286ec905f1759fe7f4fcd77f00d9a328_b.jpg" alt="头像">
    <ul>
        <li><strong>电话：</strong>131-1234-5678</li>
        <li><strong>邮箱：</strong>123456@163.com</li>
        <li><strong>QQ：</strong>123456789</li>
        <li><strong>微信：</strong>ASD987654321</li>
    </ul>
    <p><strong>职业技能：</strong></p>
    <p>HTML、CSS、JavaScript、ES6、ajax、Vue、Git</p>
</div>

.left {
    flex: 2;
    padding: 25px 40px;
}
.left img {
    height: 380px;
    width: 320px;
    margin-bottom: 15px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px #BBB
}
.left li, .left p {
    line-height: 28px;
}

4.添加求职岗位，使用position布局使其位于右上方。

<div class="right">
    <div class="job">前端开发工程师</div>
</div>

.right {
    flex: 3;
    padding: 10px;
    position: relative;
}
.job {
    position: absolute;
    top: 4%;
    right: 7%;
    color: #546484;
    font-size: 28px;
    font-weight: bolder;
    font-family: "幼圆"
}

5.使用<li>标签添加教育信息，采用flex布局使两个<ul>标签水平分布。

<div class="right">
    <div class="base-info">
        <ul class="title">
            <li>名字：</li>
            <li>大学：</li>
            <li>专业：</li>
            <li>年级：</li>
            <li>相关课程：</li>
            <li>资格证书：</li>
        </ul>
        <ul class="info">
            <li>Sanfer</li>
            <li>CQUPT</li>
            <li>数字媒体技术</li>
            <li>2020级</li>
            <li>C语言、C++、Python、数据结构、算法设计与分析、计算机网络</li>
            <li>CET4、NCRE三级数据库</li>
        </ul>
    </div>
</div>

.base-info {
    width: 100%;
    display: flex;
}
.title {
    flex: 1;
    font-weight: bold;
}
.info {
    flex: 6;
}
.title li, .info li {
    width: 100%;
    height: 50px;
    line-height: 50px;
}

6.添加项目经历。

<div class="right">
    <div class="exp">
        <p class="exp-title">项目经历</p>
        <span><strong>基于 uni-app 的电商小程序</strong></span>
        <span class="time">2022/10/18 - 2022/12/17</span>
        <p>1. 使用 vue2 + uni-app + Vant Weapp 的技术栈来开发小程序，包括搜索、分类、购物车、登录账号等功能。</p>
        <p>2. 在项目中使用 async + await 实现异步编程，采用 v-for 遍历渲染从后端 API 获取的数据。</p>
    </div>
</div>

.exp p {
    line-height: 40px;
}
.exp-title {
    font-size: 20px;
    font-weight: bolder;
    margin-top: 30px;
}
.exp span {
    line-height: 50px;
    margin-right: 20px;
}
.time {
    color: #999;
    font-size: 13px;
}

结果展示

zezuq-xq09o.gif (1534×912) (aconvert.com)

总结

此项目耗时2h左右，可见自己CSS并不熟练，当加强训练。