前言

程序员一般都怎么介绍自己呢？一个学习后端的码农也来学习前端了，用一张简约的名片来介绍自己，刚刚接触前端的我，可能写得有些瑕疵，欢迎大家的指出，同时希望自己可以更好的学习到知识

一、设计

作为理工男的我对审美和艺术可谓是一窍不通，所以我就想到了从简约上下手，岂不是看起来很高级，还有一个原因就是我的能力有限。一般的名片都是类似于一张小卡片的样式，所以我也是从这个方向去考虑的，纸质的名片都是横着的，所以我把名片做成了竖着的。

基本结构

用一个大盒子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的时候，名片名片会恢复到之前的大小。

总结：感觉学习前端还是很有意思的，虽然接触的时间很短，感觉前端的知识点很多，通过不断的记录自己的学习过程，来看看自己的成长吧！