前言
程序员一般都怎么介绍自己呢？一个学习后端的码农也来学习前端了，用一张简约的名片来介绍自己，刚刚接触前端的我，可能写得有些瑕疵，欢迎大家的指出，同时希望自己可以更好的学习到知识
一、设计
作为理工男的我对审美和艺术可谓是一窍不通，所以我就想到了从简约上下手，岂不是看起来很高级，还有一个原因就是我的能力有限。一般的名片都是类似于一张小卡片的样式，所以我也是从这个方向去考虑的，纸质的名片都是横着的，所以我把名片做成了竖着的。
基本结构
用一个大盒子div，然后在div里面放文字和图片，有姓名和邮箱，电话，还擅长的技术方向，这里的图片把本地的图片传入到了网上的一个聚合图传，这样就可以通过http访问这张图片
感觉聚合图床还是挺好用的:
网络异常，图片无法展示
|
二、代码
html部分
实现思路：用了最常见的几个标签放在一个div盒子里面
<div class="card"> <img src="https://www.superbed.cn/signup?from_id=60858" alt="Profile Picture"> <h1>高彬滔</h1> <h2>技术方向：前端</h2> <p>Email: @juejin.cn</p > <p>Phone: 1234567</p > </div> 复制代码
css部分
实现思路：设置了div盒子的大小和他的background，将盒子的位置设置在中心，img通过border-redius可以将一张图片显示在一个圆圈里，就像我们平时看到的头像。
.card { width: 300px; height: 400px; background-color: #fff; box-shadow: 0px 0px 10px #ccc; text-align: center; padding: 20px; margin: 0 auto; } img { width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; display: block; } h1 { font-size: 2em; margin-top: 20px; } h2 { font-size: 1.5em; margin-top: 10px; color: #999; } p { font-size: 1.2em; margin-top: 10px; color: #555; } 复制代码
js部分
实现思路：写了一个简单的函数，通过绑定事件源，然后用mouseenter和mouseleave触发的时候，调整名片的大小
function animateCard() { var card = document.querySelector(".card"); card.addEventListener("mouseenter", function () { card.style.transform = "scale(1.1)"; }); card.addEventListener("mouseleave", function () { card.style.transform = "scale(1)"; }); } animateCard(); 复制代码
三、运行效果和总结
到这里我的名片设计也已经完成了，看看效果，毫无疑问，运行出来的结果和你想象的差不多，极度简约，唯一有的一个交互效果就是当mouseenter的时候，名片会放大，而mouseleave的时候，名片名片会恢复到之前的大小。
总结：感觉学习前端还是很有意思的，虽然接触的时间很短，感觉前端的知识点很多，通过不断的记录自己的学习过程，来看看自己的成长吧！
