当青训营遇上码上掘金

创作背景

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

说来惭愧，青训营刚开始时并没有注意到这个活动，还是在其发出即将截止的通知时才注意到，加之自己仍旧比较菜，所以也只是简单进行了一个名片的创作。

灵感来源

内容：创作名片，想到的便是人像与简单介绍，人像并不需要以自己的照片露面，因此我选择了虚拟头像加简单的自我介绍。

样式：我想过将头像作为名片的背景图片，但这样会将头像的部分内容遮挡，难以得到一个良好的视觉效果，于是我选择了让头像与自我介绍内容“各自为政”，左头像右自我介绍。

自我介绍背景图片：再接着就是对自我介绍下方的背景图片的思索，本是打算在网上找一张好看的图片做背景板，但又感觉有些花里胡哨。恰好之前在CSS的学习过程中看到了一个渐变的写法，于是便打算在这里尝试一下。

实现

以下是html代码部分：

  <div class='content'>
    <div>个人名片</div>
    <div>昵称：故城</div>
    <div>爱好：游泳，听音乐</div>
    <div>学习方向：前端基础</div>
  </div>
</div>

<div class="myimg">
<a href="https://p3-passport.byteimg.com/img/user-avatar/f71f514437a529d08f863a8174105f84~180x180.awebp">

      <img src="https://p3-passport.byteimg.com/img/user-avatar/f71f514437a529d08f863a8174105f84~180x180.awebp" width=150px height=150px >

</a>
</div>

以下是CSS代码部分：

    width: 250px;
    height: 150px;
    position: absolute;
    left: 150px;
    top: 0;
    background: linear-gradient(to bottom right, rgb(224, 130, 169) , rgb(49, 95, 224));
}

.content{
  padding: 30px;
  font-family:"楷体", Times, serif;
  font-size: 20px;
}

.myimg {
  position: absolute;
    left:0;
    top:0;
}

展示

最后效果展示：

[jcode](https://code.juejin.cn/pen/7199843422360830007)

虽说是展示，其实这个名片十分的简单或者说简陋。。。在制作时，运用的大多都是基础知识，并没有什么进阶内容，但有些基础知识我运用的还不算熟练，所以我认为巩固基础知识还是当前的重中之重。

最后与大家分享一句话：于高山之巅，方见大河奔涌。希望大家都能向着自己的目标更进一步！