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

我很高兴能够参加这次青训营前端专场。我写的是第一个主题：制作我自己的名片。制作一张线上的个人名片，向外界展示自己的同时，方便需要的人联系自己。效果图如下所示：

整体的代码风格简约明了，主要使用了html+css 没有使用过多的复杂语句。名片是向他人介绍自己的重要工具，不宜复杂化，以最简单醒目的方式介绍自己的关键信息即可。

html

<div class="card_a">
  <section>
    <h2>张三<span>前端设计师</span> </h2>
    <img src="wx.png" alt="">
    <ul>
      <li>电话 / 15204373272</li>
      <li>邮箱 / 1440770349@qq.com</li>
      <li>地址 / 四川省·成都市</li>
      <li>网址 / www.zhangsanblog.com</li>
    </ul>
  </section>
</div>

css

名片右边的渐变就是用径向渐变来实现的，所以可以用一个伪元素：after来定义，然后颜色从蓝色过渡到粉色.中间色我用透明来过渡，可以消除边界线

<style>
 * {
    margin: 0;
    padding: 0
}
 
.card_a {
    width: 800px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -230px;
    margin-left: -400px;
    background: #efe6f1;
    overflow: hidden;
    border-radius: 10px;
}
 
.card_a:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
    bottom: -53px;
    left: -87px;
}
 
.card_a:after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    top: -123px;
    right: -352px;
}
 
.card_a section {
    width: 600px;
    position: absolute;
    left: 100px;
    top: 80px;
    z-index: 9;
}
 
.card_a section h2 {
    font-size: 50px;
    letter-spacing: .1em;
    margin-bottom: 66px;
}
 
.card_a section span {
    font-size: 28px;
    font-weight: normal;
    margin-left: 50px;
    letter-spacing: normal;
}
 
.card_a img {
    float: right;
    width: 140px
}
 
.card_a section ul {
    border-left: #222 3px solid;
    padding-left: 28px;
}
 
.card_a section ul li {
    list-style: none;
    line-height: 38px;
    font-size: 18px;
}
 
</style>

希望我在这次青训营中能够结识更多有趣的伙伴，可以相互学习，一起进步！通过此次入营活动，我学习到前端知识想要熟练使用，不但需要掌握深入且前端知识，还需要经常去使用它们，动手去写，才能进一步深入理解