当青训营遇上码上掘金

前言

如果作为前端程序员，为自己设计一个好看并炫酷的名片是多么爽的一件事情。我一直在想名片上需要放什么具体内容，思来想去，最后还是决定就放上自己社交平台上的链接，这样不仅看起来简约，而且观看的人可以点进去能更加细致的了解我，一举两得，并且设计上是很简单的，代码也相对简单，这次我没有使用js就完成了我的名片设计，那接下来就是我设计思路的一个概述。

设计思路

在本次的设计中，我主要秉承着简洁的思想，当进入我的名片界面时，直接看到我自己设计的名片图片，然后鼠标移动到名片上时，会出现我的人生格言和我的各种账号的链接，这样简洁明了，想要更加深入地了解我的人可以直接点击对应链接进入。

代码解析

HTML

对于 html设计就比较简单，首先是一个div盒子，然后是我的三部分，名片的图片、格言、联系方式，简洁明了，下面是 html 的代码片段

<div class="container">
        <div class="image">
            <img src="https://pic.imgdb.cn/item/63e4f8d14757feff33ade100.png" alt="">
        </div>
        <div class="content">
            <div class="info">
                <h2>Jellian</h2>
                <span>A research student who is studying hard</span>
            </div>
        </div>
        <ul>
            <li><a href="#"><span class="iconfont icon-weixin"></span></a></li>
            <li><a href="https://github.com/Nan-qiao"><span class="iconfont icon-github"></span></a></li>
            <li><a href="https://weibo.com/u/3756810335"><span class="iconfont icon-weibo"></span></a></li>
            <li><a href="https://wujiaoya.com"><span class="iconfont icon-QQ-circle-fill"></span></a></li>
            <li><a href="https://www.instagram.com/shalan0237/"><span class="iconfont icon-instagram-fill"></span></a></li>
        </ul>
    </div>

CSS

对于样式的设计也较为简单，首先是.container的样式，定义它的宽高，并且它的 overflow 应该是 hidden 。否则 .image translateY 时 会溢出。 这里的难点主要在于定位问题，主要是记住一个口诀 “子绝父相”，还有就是在过渡阶段记得设计下时间，否则会看起来很生硬。

演示

总结

在本次设计中，我只用到了 html和 css没有用js，因为我现在还没想好是否需要加js，并且加js时是需要添加什么功能，且加上后会不会太过多余还不如不加，所以暂时先这样啦~