个人名片创作 |「青训营 X 码上掘金」

当青训营遇上码上掘金

在本次码上掘金创作活动中，我选择了个人名片的创作。接下来就相对来详细介绍一下实习个人名片的思路和方法。 首先，实现一个名片必须要有一个卡片的样式。而这边不使用card组件来实现，而是使用CSS中的border和background来实现一个边框来的样式，如下：

    background-color: #f4f5f5;
    border: 1px solid hsla(0, 0, 59.2, 0.1);

只要在该class下的内容都是被包裹在边框里的，并且边框的大小会随着内容的多少而变化，所以我们还要设置边框的大小，这边使用一个padding来实现边框大小为1.4rem。

然后，用明信片来介绍自己，那么需要有姓名、头像、身份、能力和自己的个性签名。在头像方面使用img便签来完成，并且在CSS中，使用width和height来实现图片大小。由于像姓名和身份这两项放在头像的右边，那么需要对头像这个class的展示方式display设置为flex。

.author-png {
    position: relative;
    display: flex;
    margin-right: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

姓名和身份设置完成之后，能力和个性签名放在最底下，这些直接布置就好。而姓名是这么多项当中的首项，所以要让姓名有所不同，那就是字体颜色和尺寸做一下调整。字体颜色就是color，调整为#000000这个代表着黑色。而身份、能力和个性签名的颜色设置为#515767，这个颜色代表着灰色。

成品的效果如下：

最后给出了完整的代码：

总结：在学习过程中，还是掌握了基本的HTML和CSS的语法实现，并且也成功实现了个人明信片的样式，说明学习效果还是显著的。