当青训营遇上码上掘金

前言

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。就让我通过我学习的前端三件套，HTML,CSS,JS来实现我的名片制作。

实现原理

通过使用HTML 标签 展示我的头像，使用

标签展示文字内容

 <div class="con">
	    <div class="card">
			<div class="hpicture">
				<img src="https://p3-passport.byteimg.com/img/user-avatar/5eb2e22c6885a49aac46dc86d4421fd4~180x180.awebp" class="img1">
			</div>
			<div>
				<p>h阿泉</p>
			</div>
			<div class="ip">
				<p>2021112233</p>
			</div >
			<div class="ip1">
				<p>学校:福建福州大学</p>
			</div>
			<div class="ip2">
				<p>爱好:算法竞赛</p>
			</div>
		</div>
	  </div>
              

使用div 划分标签图层，展现我的信息。

css

使用CSS层叠样式表技术，修饰我的名片,主要使用了background 添加背景颜色，使用了padding，margin定位标签元素在页面中的位置，避免出现标签乱跑的现象。

*{
                        padding: 0;
                        margin: 0;
                }
                #app{
                        background-image: url('img/1.jpg');
                        background-repeat: no-repeat;
                        background-size:100vw 100vh;
                        width: 100vw;
                        height: 100vh;
                }
                .con{
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%,-50%);
                  display: flex;
                }
                .card{
                        background-color: rgb(127, 251, 255);
                        border: 1px solid white;
                        height: 20vh;
                        width: 20vw;
                        box-shadow:0px 0px 10px 5px whitesmoke;
                         transition:width 1.5s,height 1.5s,transform 1.5s;
                         display: flex;
                        flex-direction: column;
                         align-items: center;
                         justify-content: center;
                }
                .card:hover{
                        height: 40vh;
                        width: 40vw;
                        transform: rotate(360deg);

                }

            

js

通过学习js技术，使用了DOM结构的document.querySelector，获取到标签内元素的值，进行页面交互。加入了定时器setTimeout，让页面更加具有灵动效果。 let head=document.querySelector('.card'); let Hh=head.offsetHeight; console.log(head.offsetHeight); head.addEventListener("mouseover",function(){ setTimeout(function(){ if(head.offsetHeight!=Hh){ ip.style.display='block'; ip1.style.display='block'; ip2.style.display='block'; } },1000) });

总结

名片作为个人信息展示的一个媒介，通过学习前端三件套来实现我的名片自定义设计，是一件很炫酷的事情，不论是在学校里还是在社会上，名片都是一个作用很大的媒介，可以通过名片信息让别人来了解我，我也可以通过名片信息了解别人，通过前端技术来实现我的名片真是太棒了。

项目展现