作为程序媛，你还在这样自我介绍吗？

当青训营遇上码上掘金→你会拥有独一无二的自我介绍！

自我介绍是每一个职场中人都必然要经历的一件事情，自我介绍是日常工作中与陌生人建立关系、打开局面的一种非常重要的手段，因此，让自己通过自我介绍或得到对方的认识甚至认可，一种非常重要的职场技术。

问题来了...

现在的你还在进行怎样的自我介绍呢？ 是还只停留在‘你好，我是XXX...’、‘我是来自XXX的...’的口头表达吗？ 如果你看到这篇文章，你将得到一种令人刮目相看的自我介绍。

话不多说，上代码！

当当当~

当别人一看到属于你自己的名片，一来能马上清晰有条理地看到你的个人信息以及简介的自我介绍，更棒的是能让别人知道你对代码的热爱，还能不失风度地炫耀一把。

接下来一步一步的来分享我的开发过程：

首先是HTML代码

HTML文件主要是展示页面所涵盖的信息，因此，在该文件我们需要考虑的是名片上需要出现什么内容。自我介绍是向别人介绍自己，基本包含姓名、年龄、身高、体重、兴趣爱好以及个性（按照自己需求自行填写）等；除此之外，为了让别人能更好地深入了解自己，还可以附加一段简短的文字来简述自己以往的经历。通过上述确定下来名片上所展示的信息内容，编写HTML代码。

  <div class="baseInf">
      <div class="name">
        Little Ice
      </div>
      <div class="sex"><span>性别:</span>女</div>
      <div class="age"><span>年龄:</span>21</div>
      <div class="Height"><span>身高:</span>不详</div>
      <div class="Weight"><span>体重:</span>不详</div>
      <div class="hobby"><span>兴趣爱好:</span>敲代码+吃喝玩乐</div>
      <div class="personality"><span>个性:</span>热情开朗，积极向上，有点小可爱✌</div>

  </div>
  <div class="moreInf">
    <div class="title">自我介绍</div>
    <div class="content">
      <div>我是来自华南地区的一个小女孩，在为自己的梦想一步一步的往上爬！</div>
      <div>
        本人热爱前端开发，善于利用资源，参加蓝桥杯、大学生创新创业等各种项目比赛来提升自己的敲代码能力；
曾任副班长、班主任助理，现任院级组织青协技术部副部长，善于面对各种挑战，积极乐观，具有团队精神。
      </div>
    </div>
  </div>
  <div class="touXiang">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202103%2F23%2F20210323132934_d2473.thumb.1000_0.png&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1676297003&t=d47a4715a30f28d446ad21228c0ba88a">
  </div>

</div>

一个赏心悦目的名片绝不仅仅是文字的堆积，接着我们需要通过css样式来美化名片

考虑到本人是属于甜美性格，所以将总体background-color设置为粉红色系，能很好地起到让人见名片如人的效果；为了使布局更有条理，以及更加美观，通过设置display:flex布局，把文字信息布局规划好；利用伪类来添加白色线条，使名片更加美观。

  padding: 20px;
  height: 360px;
  width: 700px;
  background-color: rgb(230, 161, 161);
  border: 1px solid rgb(236, 42, 42);
  display: flex;
  flex-direction: column;
}
/* 设置基本信息样式 */
.baseInf {
  flex: 1;
  margin-left: 200px;
}
/* 设置姓名样式 */
.name {
  margin-top: 20px;
  font-size: 25px;
  height: 50px;
}
.name span {
  font-size: 20px;
  margin: 5px;
}
/* 设置性别样式 */
.sex {
  font-size: 20px;
}
.sex span {
  font-size: 20px;
  margin: 5px;
}
/* 设置年龄样式 */
.age {
  font-size: 20px;
}
.age span {
  font-size: 20px;
  margin: 5px;
}
/* 设置身高样式 */
.Height {
  font-size: 20px;
}
.Height span {
  font-size: 20px;
  margin: 5px;
}
/* 设置体重样式 */
.Weight {
  font-size: 20px;
}
.Weight span {
  font-size: 20px;
  margin: 5px;
}
/* 设置兴趣爱好样式 */
.hobby {
  font-size: 20px;
}
.hobby span {
  font-size: 20px;
  margin: 5px;
}
/* 设置个性样式 */
.personality {
  font-size: 20px;
}
.personality span {
  font-size: 20px;
  margin: 5px;
}

.baseInf::after {
  content: '';
  position: absolute;
  width: 700px;
  margin: 10px;
  border: 1px solid #fff ;
}

/* 设置更多信息样式 */
.moreInf {
  flex: 1;
  padding-top : 20px;
}
/* 设置自我介绍标题样式 */
.title {
  font-size:20px;
}
/* 设置上尖角样式 */
.title::before {
  content: '';
  position: absolute;
  border: 1px solid #fff;
  height: 5px;
}
/* 设置上尖角样式 */
.title::after {
  content: '';
  position: absolute;
  border: 1px solid #fff;
  height: 5px;
}
/* 设置图片样式 */
.touXiang {
  position: absolute;
  top: 70px;
}
img {
  height: 150px;
  width: 150px;
  z-index: 9;
}

综上，便得到属于你自己的名片啦！

以后就能非常酷炫地进行自我介绍啦！