当青训营遇上码上掘金

活动介绍

活动要求
- 名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。
- 此活动要求围绕“我的名片”这个主题进行代码创作。
活动链接：「青训营 X 码上掘金」主题创作活动入营版

名片设计

名片的作用
- 介绍自己，增加他人对自己的了解，让别人在看完名片后对自己有一个基本的认识，也是对自己进行一定的标签化
- 留下联系方式，以便他人日后联系
名片要素
- 照片
- 姓名
- 主流联系方式
  - 电话
  - 邮箱
- 简介
设计草图

代码设计

HTML

主要是按照之前的设计思路分为了上中下三个部分

上面：照片 + 名字

图片是百度的开源图片
使用img标签展示图片，src存放地址，alt命名方便加载慢或无障碍

代码

<div class="top">
    <div class="selfie">
      <img
        src="https://ts2.cn.mm.bing.net/th?id=OIP-C.hTRFzuzpp-gsdhUrejt0pwAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
        alt="自拍照">
    </div>
    <div class="name">
      言<br>
      辰
    </div>
  </div>

中间：自我简介

代码

<div class="middle">
    <span>简介</span>
    <p>我是一名大二学生，曾获得ICPC区域赛铜牌(南京站),目前正在学习前端领域知识。</p>
  </div>

下面：联系方式

代码

<div class="bottom">
    <p><span>电话：</span>012345678901</p>
    <p><span>邮箱：</span>6666@163.com</p>
  </div>

CSS

将网页背景设置为白色凸显名片
```
html{
  background-color: white;
}
```

整体设置名片的大小，位置和背景颜色

body{
  width: 500px;
  margin: 0 auto;
  background-color: rgb(218,216,189);
  padding: 20px 20px 20px 20px;
  border: 5px solid black;
}

通过设置顶部为flex实现照片在右，姓名在左

.top{
  display: flex
}

img{
  width: 280px;
}

.name{
  font-size: 100px;
  margin: 10px 50px 50px 0px;
  margin-left: auto;
}

设置中底部位置及文字样式

.middle{
  margin: 0px 0px 30px 0px;
}

.middle span{
  font-size: 30px;
}

span{
  font-weight: bold;
}

完整代码：我的名片 - 码上掘金 (juejin.cn)

成品展示

作品总结

我其实也就刚接触前端没多久，之前一直在打ACM，计算机相关知识也就是学了c、c++和数据结构。选择前端也是在室友的引领下想要尝试接触，目前对前端还是蛮有好感的，哈哈。这个网页其实也是我第一次发布的，自己设计，然后编码的。虽然有点简陋，但还是有一种成就感的，让自己所学变为一个成果，感觉还是很棒的。希望自己以后继续加油，学习更多知识，学有所用，学有所成。