当青训营遇上码上掘金——我的名片

很荣幸来到第五届青训营的前端专场，本次活动中，我参与的是我的名片这一主题，作为一名前端初学者，利用代码编写名片对我来说是一次练习，在此同时也方便他人认识我。

HTML

<div class="card">
  <div class="card_img">
      <img src="https://i.postimg.cc/tJqwMFz2/20230213194953.jpg">
    </div>
    <div class="card_info">
       <div class="info">
         <h2>厦门的茉莉花</h2>
         <h4>职业：前端架构师</h4>
         <li>联系方式：15918708233</li>
         <li>邮箱：xxx@163.com</li>
         <li>地址：广东省深圳市</li>
       </div>
    </div>
</div>

名片中的主要信息是利用HTML的简单标签书写，属于是入门级别的难度，没有什么比较难以理解的知识点。

CSS

* {
    margin: 0;
    padding: 0
}
 
.card {
    width: 500px;
    height: 250px;
    position: absolute;
    transform: translate(50%,50%);
    background: rgb(0,0,0,.1);
    color: #222;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.card > * {
  margin-top: 50px;
}
.card .card_info {
  width: 300px;
  height: 200px;
  
}
.card .card_info .info {
  height: 150px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card .card_img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}

.card .card_img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

效果：

名片的总体布局采用flex布局，具有弹性，可以自适应，盒子完全由里面的内容撑开；主要分为两部分，一部分是头像部分，一部分是个人信息部分，个人信息中也是采用flex布局，并将flex的主轴改成Y轴进行弹性支撑，

总结：希望在本次青训营中可以认识到志同道合的朋友，一起做项目，增加项目经验，锻炼代码能力，不断学习新的知识，对前端有进一步的理解。