青训营 X 码上掘金 - 我的名片

当青训营遇上码上掘金

主题1：

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

创作背景

青训营推出了青训营X码上掘金，我看了有四个主题，其中最容易并且最有趣的就是写名片了，以前一直看到别人拿出一张名片，很酷很酷的样子，虽然可能会写的很瑕疵，但是不要紧，努力就好！那今天我也来实现一下吧！

设计

作为工科生的我对UI可谓是一窍不通，所以我就大概列举了几个元素就可以，比如名字，微信，个人网站，邮箱，年龄，就职方向，以及兴趣爱好入手。

实现

主要是一个框，然后设置内边距为20px，内容自适应撑开，居中对齐。字体颜色为白色，字体大小为20px，每一行高度为30px，行高也为30px，以求实现竖轴居中对齐。整体格调为偏蓝色，并且有蓝色阴影，且框的四角都圆润一点。

<div id="app">
            <div class="item">名字:丁真</div>
            <div class="item">微信:1376666</div>
            <div class="item">个人网站:dz-com</div>
            <div class="item">邮箱:dz@163.com</div>
            <div class="item">年龄:20</div>
            <div class="item">就职方向:前端工程师</div>
        </div>

#app {
  width: 200px;
  height: 180px;
  margin: 0 auto;
  background-color: #131044;
  border-radius: 10px;
  .item {
      display: flex;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      line-height: 30px;
      height: 30px;
  }
}

最后

虽然最后结果实现了，但是花费的时间比预期的多的多，可能是因为对html、css不熟的原因吧，希望以后可以通过自己的努力提升一下。不然做的那么慢。老板都要开除我了。从这件事开始知道，原来居中对齐不仅可以用text-align，还可以用flex，怪不得我一直对不齐文字。。。