我的名片

当青训营遇上码上掘金

这次我选择的主题是个人名片，从需求分析入手，到编码实现，充分的做到了一个前端工程师的责任与义务。

这是一个简易版的个人名片，既然是个人名片，就需要展示自己的基本信息，那么就需要一个无序列表来展示这些名片的基本信息。还需要一个头像来展示名片主人的颜值。

首先是HTML结构，我用一张大的盒子bigBox包裹住所有名片信息，也就是当做名片本身，里面放上了两个div，一个div用来当头像的盒子，一个用来盛放ul列表展示用户信息。最后为了增加趣味与交互性，放上了一个button按钮，用来挑战大侠。 `

<div id="name"></div>
<div class="title">
  
  <ul class="list">
    <h1>尚大侠</h1>
    <li>前端开发工程师</li>
    <li>性别：男</li>
    <li>年龄：22</li>
    <li>numbe：800820-8820</li>
    <li>爱好：敲代码，敲代码，敲代码，刷抖音</li>
  </ul>

</div>
<button class="btn">挑战</button>

然后是CSS方面 给大的盒子也就是名片添加了一个居中的效果，还添加了一个水墨画风的背景图片，增加仙侠气息。

.bigBox{ width: 600px; height: 400px; border: 1px solid black; border-radius: 30px; margin: 100px auto; background: url(https://img-qn.51miz.com/preview/video/00/00/15/23/V-152395-85EE9491.jpg) no-repeat; position: relative; }

头像方面给盒子加了一个圆角，这样显得美观一些，使用绝对定位对头像进行定位，使他靠近名片的左上角。

#name{ border: none; border-radius: 30px; position: absolute; top: 10%; left: 8%; width: 100px; height: 100px; background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F12%2F20210712160723_84b09.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678536641&t=e4b243572398a0c7701958e257649189) no-repeat; background-size: 100px }

对信息列表进行定位，定位到名片右边位置，对ul开启flex布局，使ul变为弹性盒，li则变为弹性元素，并让弹性盒的主轴按照从上到下的顺序排列，并且水平居中。

.list{ margin: 20px 50px 50px 250px; text-decoration: none; display: flex; flex-direction: column; align-items: center; line-height: 40px; } li{ list-style: none; }

最后对按钮进行样式修改，也是绝对定位到名片左下角，设置圆角、边框等样式，最后加上一个鼠标移入的hover。

.btn{ width: 100px; height: 50px; border-radius: 10px; border:1px solid rgb(25, 25, 25); position: absolute; bottom: 50px; left: 80px; } .btn:hover{ background-color: red; transition: all 1s; }

当鼠标点击按钮的时候，我们希望出现一个弹窗，用来警告你没充Q币

document.querySelector('.btn').addEventListener('click',function (){ alert('挑战失败，请充Q币！！！') })

最后的成品就是这样的