我的名片「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金

为何选择名片：

名片，又称卡片（粤语写作卡（kā）片），中国古代称[名刺]，是标示姓名及其所属组织、[公司]单位和联系方法的纸片。名片是[新朋友]互相认识、自我介绍的最快有效的方法。交换名片是[商业]交往的第一个标准[官式]动作。
清[俞樾]《茶香室续钞·古人书疏皆题后以答》：“按此则知今人所用名片，始名季也。”[梁启超]《[新中国未来记]》第四回：“我今日偶然忘记了带名片，见谅见谅。”[王西彦]在《古城的忧郁·灾祸》写到：“他走得很匆忙，一听见你不在家就打回头，连名片也没有留。”
名片是向人介绍自我的重要工具，同时也是快速了解一个人的一种重要方式，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

代码演示：

实现思路：

结构部分： 在一个大盒子里放入一个 contain 盒子，把这个盒子分成左右两部分，左边为个人头像，右侧为个人信息介绍，再将右侧盒子分为上下两部分，上为姓名，下为个人简介。给个人头像的图片加上 alt ，避免用户网络卡顿，从而导致图片无法加载，出现一片空白。

样式部分：

1. 清除默认的外边距和内边距

* {
  margin: 0;
  padding: 0;
}

2. 设定大盒子的高度为整个视口
3. contain 采用 css3 盒子模型
4. position 采用 absolute 绝对定位
5. 给 conatiner-main 盒子采用浮动布局,并用 border-radius 将盒子的边缘菱角进行软化

.contain-main {
      display: flex;
      border-radius: 10px;

6. 在左侧放置个人头像的盒子中 给一个 overflow:hidden,对超出盒子的部分进行处理,并用 border-radius 把图片设置为一个圆形

.contain-main-left {
      display: flex;
      justify-content: center;
      width: 180px;
			height: 120px;
			overflow: hidden;
      border-radius: 50%;
      }

7. 在右侧的盒子中用 line-height 设置文字间的行高

line-height: 200%

8. 为了一定的视觉感受,在contain 和 大盒子中 使用 background-image: linear-gradient() 设置背景渐变

background-image: linear-gradient(45deg,  rgb(88, 175, 230), rgb(182, 255, 255));
background-image: linear-gradient(90deg,  rgb(88, 175, 230), rgb(182, 255, 255));