当青训营遇上码上掘金
前言
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。接下来看一下我的个人名片。
效果预览
当鼠标放到图片上时,效果如下:
设计理念
HTML部分
首先编写HTML部分,先给个大盒子box用来装所有内容，然后再定义一个box盒子来存放头像的头部样式，接着是h1和h3标题，然后是三个段落p标签。
<body>
<!-- 开始 -->
<div class="card">
<div class="photo">
<img src="./img/1.jpg">
</div>
<h1>星倦</h1>
<h2>天津机电职业技术学院</h2>
<p>爱好：吃饭、睡觉、唱歌<br></p>
<p> 邮箱：2953504224@qq.com <br></p>
<p> 前端小白，目前大二</p>
</div>
</body>
CSS
接下来是css部分，先用*清空所有样式，然后给元素最外层的盒子也就是body采用flex布局，让它的所有子元素自动成为容器成员，之后使盒子居中，位于网页中间。
* {
margin: 0;
padding: 0;
}
html {
font-size: 14px;
}
body {
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}
Flex布局
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。行内元素也可以使用Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
总结
本人是一个前端小白，能力有限，只用了html和CSS，没有用到JavaScript。争取在下次活动中，学会使用JavaScript。让自己的代码更加丰富。
