当青训营遇上码上掘金
创作目的
在寒假时参加了字节跳动的青训营，借着参与青训营活动的机会，设计自己的名片，并分享与大家。
借用活动中的话，名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。也是对这段时间青训营学习的一个简单的总结与应用。
具体设计
我对渐变的色彩较为喜爱，于是先定下了大体设计为渐变色设计。
总体效果如图所示：
是比较简单的一个名片，参考了博主小清清的设计。
设计思路
第一步，首先是名片的大体布局，先写一个div，定义其宽为800px，高为460px的长方形，10px的圆角，背景色为粉色，并且将它居中显示，作为名片的整体背景。
html:
<div class="card_a">
</div>
css:
.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;
}
第二步，用伪元素实现颜色渐变
为实现渐变效果，在菜鸟教程学习了css实现渐变的方法如下：
css3属性颜色渐变属性有两种类型
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
.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;
<img src="}" alt="" width="70%" />
第三步，完成文字部分
再考虑承载我个人信息的部分，用一个section来顶下位置， 姓名用标签h2定义，字体大小为50px，文字间距用letter-spacing定义0.1em距离，span标签定义职位，可取消h2标签父类元素的字体大小以及粗细来重新定义。电话邮箱等基本信息，用li列表来实现。
html:
<section>
<h2>断墨<span>前端工程师</span> </h2>
<img src="wx.png">
<ul>
<li>电话 / 182377*****</li>
<li>邮箱 / 311987****@qq.com</li>
<li>地址 / 河南省·**市</li>
<li>博客 / www.baidu.com</li>
</ul>
</section>
css:
.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;
}
整合全部的代码， 最后的整体代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>个人名片</title>
</head>
<body>
<div class="card_a">
<section>
<h2>断墨<span>前端工程师</span> </h2>
<img src="wx.png" alt="">
<ul>
<li>电话 / 182377*****</li>
<li>邮箱 / 311987****@qq.com</li>
<li>地址 / 河南省·**市</li>
<li>博客 / www.baidu.com</li>
</ul>
</section>
</div>
<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>
</body>
</html>
直接在vscode上就可以运行展示
后语
尽管设计的还很粗糙，而且相当一部分的设计思路设计借鉴的其他博主，但自己亲自动手将这些实现的，在不断的犯错，与原博主的对比中，逐步完善自己的名片的过程，是相当有意义的。
而且在实际的设计中，我发现程序员真的很需要美感，特别是开发岗，前端设计是一件很有成就感很幸福的事情，尽管我在决定走上前端开发之路之前，我学习了一些具有启发意义的设计类书籍来增强自己的审美与设计能力，但在实际的二开发中，发现好的设计真的很难做到。
我在设计名片的过程中，首先是参考了相当多的博主名片，但在自己设计自己名片时，总是找不到让自己舒服的设计以及布局，希望下次在设计名片时，不再是对其他人名片的复现与简单改变，而是真正设计出符合自己美感的，能让自己满意的名片。
