当青训营遇上码上掘金——我的名片

很高兴能够参加这次青训营前端专场，看到这个活动的四个主题后，我觉得第一个主题制作名片比较有意思，能够用代码介绍我们自己，就打算尝试一下，顺便巩固一下自己的知识。

主题介绍

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

创作思路

由于名片大多都是介绍个人信息的，最好是要简洁明了，让他人一下子就能了解你，于是我的名片有两个部分组成left、right：

• left：主要是个人的昵称和头像
• right：主要是个人的一些基本信息，包括姓名、联系方式、简介、座右铭等

代码

html

<!-- 主体区域 -->
<div id="wrapper">
  <!-- 左侧 -->
  <div class="left">
    <h4>一叶之秋</h4>
    <img src="https://pic.imgdb.cn/item/63d3abc7face21e9ef3c1215.jpg">
  </div>
  <!-- 右侧：基本信息 -->
  <div class="right">
    <div>
      <span>姓名：</span>
      <p>操辉生</p>
    </div>
    <div>
      <span>性别：</span>
      <p>男</p>
    </div>
    <div>
      <span>电话：</span>
      <p>18171318816</p>
    </div>
    <div>
      <span>QQ：</span>
      <p>3372706844</p>
    </div>
    <div>
      <span>简介：</span>
      <p>目前在读大二，爱好编程，持续学习技术中，喜欢通过代码创造一些自己的东西。</p>
    </div>
    <div>
      <span>座右铭：</span>
      <p>永远相信美好的事情即将发生！</p>
    </div>
  </div>
</div>

css

#wrapper{
  width: 400px;
  height: 240px;
  background: #71edf9;
  border-radius: 2%;
  box-shadow: 1px 1px 5px;
  padding: 10px;
}

#wrapper .left{
  width: 100px;
  margin-left: 10px;
  margin-top: 15px;
  float: left;
}

#wrapper .left h4{
  margin: 10px auto 15px;
  text-align: center;
}

#wrapper .left img{
  width: 100px;
  height: 100px;
  border-radius: 100%;
}

#wrapper .right{
  float: right;
  width: 250px;
  margin-top: 15px;
}

#wrapper .right div{
  line-height: 25px;
}

#wrapper .right div span{
  display: inline;
  font-weight: bold;
}

#wrapper .right div p{
  display: inline;
}

成果

最后

本人是纯前端小白，临时抱佛脚狂补了一些html和css的知识才做出了这个名片，虽然很简单，但是也让我收获了满满的成就感，让自己的知识得到了实践。希望自己以后可以学习更多js的知识，给名片添加一些动画效果，变得更酷炫些！