个人名片

当青训营遇上码上掘金

前言

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。但是，只是写一个名片是不是有点太单调太乏味了。为了避免这个，我决定创意一下（搞怪）。不如写成简历的样子，这样信息明确，样式新颖，当然，内容绝对不是真实的，就用我喜欢的狗子来充当本文的主人公吧，他就是上图的样子。

有了灵感就得想想怎么创作了，简历不能太花里胡哨，得明确的展现出个人的技能、优势等。于是乎，我选择了左右分布，内容分栏的形式。 先上效果图吧。

没什么太多的技术含量，只是布局的复杂一点。

实现思路

先把纸片居中，内部分左右，左右部分再依次分出专栏，大致的布局是这样的，

<div class="page">
    <div class="left">
      <div class="box name">
      </div>
      <div class="box infos">
      </div>
      <div class="box phone">
      </div>
      <div class="box awards">
      </div>
    </div>
    <div class="right">
      <div class="box non"></div>
      <div class="box award">
      </div>
      <div class="box job">
      </div>
      <div class="box self">
      </div>
    </div>
  </div>

有了基本的布局之后，下一步就是填充内容了内容随自己的意愿而定。

填充好内容，就要写css，先把页面居中，左右分布的样式画出来，然后把分栏的公共的样式给抽离出来，在对每个具体的分栏进行不同的细节微调，当调整好了后就基本完成了。

.page .left{
  width: 35%;
  height: 100%;
  float: left;
  text-align: center;
  background-color: #1A2B3D;
  color: #fff;
}
.page .left .box{
  width: 100%;
  padding: 30px 0 0 0px;
  border-bottom:2px solid white ;
  position: relative;
}
.page .right{
  width: 65%;
  height: 100%;
  float: left;
  background-color: rgb(255, 255, 255);
  color: #1A2B3D;
  text-align: center;
}
.page .right .box{
  width: 100%;
  padding: 40px 0 0 0px;
  border-bottom:2px solid #1A2B3D ;
  position: relative;
}

到这里，我的名片也就基本的完成了，剩下的随个人兴趣调节一下就欧克了。

文章代码已在码上掘金发布