当青训营遇上码上

前语

程序员一般都怎么介绍自己呢？一个学习后端的码农也来学习前端了，用一张精约的手刺来介绍自己，刚刚触摸前端的我，可能写得有些瑕疵，欢迎大家的指出，一起期望自己能够更好的学习到常识

一、规划

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

基本结构

用一个大盒子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的时分，手刺手刺会恢复到之前的巨细。

总结：感觉学习前端还是很有意思的，尽管触摸的时间很短，感觉前端的常识点很多，经过不断的记录自己的学习过程，来看看自己的生长吧！

极度简约的个人名片