当青训营遇上码上掘金前端部分分为两个主题，选择了第一个我的名片进行创作。名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

HTML

HTML使用的是很通用的名片结构，姓名=>职业=>联系我=>简介，从上到下进行排放，也参考了别人名片的设计进行了一些改动。主要出现的问题是在图片引入的部分，采用绝对地址进行引入时图片始终显示不出来，后改为浏览器链接才得以展示，原因应该是在线编辑器与本地图片之间无法很好的连接。

CSS

CSS部分主要是对页面样式进行调整，设置背景图片，按钮的点击效果等。头像是很重要的一环，为了能使头像更加吸引人的注意，学习了别人如何在头像框里面添加动画的效果，使其看起来更加炫酷。

JS

JS部分实现了一个简单的点击效果，即点击Contact Me 按钮，下方展示出三种可以联系我的方式，如QQ、微信、电话。首先在HTML页面加上从vant组件库里复制来的图标代码，设置好图标的位置。在JS里面添加点击的效果，设置display:block还是none实现图标的显示和隐藏。代码如下显示：

function my(id){
    return document.getElementById(id)
}
var but=document.getElementById("contact-btn")
console.log("1")
but.onclick=function(){
    console.log("2")
    if(this.value=="Contact Me"){
        console.log("3")
        my("icon_qq").style.display="block";
        // my("icon_qq").style.transform="translate(-55,7)"
        my("icon_wechat").style.display="block";
        my("icon_tel").style.display="block"


    }
    
}

代码很简短，但是写的比较乱/(ㄒoㄒ)/~~

总体来说，这是我第一次较正式的写一个题目，在过程中也学习到了很多，本来还想增加图标悬停效果，因为技术问题控制不好老是造成不同图标文字的重叠/(ㄒoㄒ)/~~，希望通过不断努力学习，未来会越来越好，也能写出更好的名片向大家展示。

我的简单名片

HTML

CSS

JS