「青训营 X 码上掘金」主题创作 | 我的名片

当青训营遇上码上掘金（主题 1：我的名片）

前言

经过各种各样的事情干扰，在今天终于有时间静下来写一篇文章了，虽然已经错过了官方的第一次结果公示，但最终不管怎样，收获到了知识就是赚到了。

主题-我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

效果展示

名片样式

html代码

    <div id="container">
        <div id="motto">不让未来的自己后悔</div>
        <div id="content">
            <div id="pic"><img src="http://mms0.baidu.com/it/u=78610928,3981059959&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=360&h=494"></div>
            <div id="description">
                <img id="description_img" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e00257189ae94d0ca332507a082c7b08~tplv-k3u1fbpfcp-watermark.image?">
                <div id="description_foot">
                    <span>姓名：邹伊杰</span>
                    <div>邮箱：<span>2191706683@qq.com</span></div>
                    <span>专业：软件工程</span>
                </div>
            </div>
        </div>
    </div>

整体名片采用了div盒子布局，首先我先确认好整个布局大致要放哪些东西，从上到下,从左至右依次放入motto：自己的座右铭,pic：名片的头像,description：有关的信息，先给他们设置宽和高，并且再设置个边框来达到上图所示的布局。再到description中上部放置学校的徽章，下部放置填入姓名，邮箱，专业等信息。（类名果然还是最头疼的，希望后面自己能够学习一下BEM）

css代码

 #container {
            width: 380px;
            height: 250px;;
            background-color: rgb(178, 224, 242);
            margin: 150px auto;
        }
        #motto {
            height: 30px;
            background-color: #2d67ad;
            color: #fff;
            text-align: center;
            line-height: 30px;
            letter-spacing: 10px;
        }
        #content {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;

        }
        #pic img{
            height: 150px;
        }
        #description img {
            width: 170px;
        }
        #description_foot {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
            height: 100px;
            justify-content: space-around;
        }

样式上我采用的flex弹性布局，能够快速的把样式布局的美观。首先，我先让在content中设置了一个flex,让pic和description呈现出space-around样式。接着，在description中再设置了一个flex，使整体呈现出flex-direction: column竖直排列，由于方向轴发生了改变，所以不再使用align-items，而是justify-content呈现出效果。

自我介绍

最后，再来个自我介绍吧。本人来自东华理工大学软件学院，技术：前端三件套，Bootstrap，jQuery，微信小程序，vue2，3。尤其了解js，能手写new，promise，使用过微信小程序写一个简单的今日头条APP，vue写过一个简单的51购物商城项目，希望能与各位大佬组队，一起进步。