当青训营遇上码上掘金
这个寒假加入了字节跳动青训营基础班，学到了很多前端相关的知识。同时心血来潮，参加了此次「青训营 X 码上掘金」主题创作活动入营版。
主题介绍：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
创作语言
HTML，CSS
思路导向
-
了解名片
名片是绘画性兼具设计性的视觉媒体，字体表现、色块表现、图案表现、色彩表现、装饰表现，甚至是排版的变化，使名片不再是一张简单、没有生气的纸片，它变成人与人初次见面时，加深印象的一种媒介。
为了使设计不落俗套，应多发挥具有独创性和有活力的构想,使设计的名片有别于一般传统的名片。名片设计的表现手法虽因行业、诉求角度、或客户而有所不同；但是构成画面材料大致是一定的，这些材料就是名片设计的重要要素，称为名片设计的构成要素。
-
了解名片内容
基本信息包括以下几个方面：
- 名称，包括持有者姓名、公司的名称
- 基本的联系方式，比如电子邮件、电话号码
- 地址，公司的详细位置
-
设计思路
设计一个圆角的名片边框，边框可以有阴影投射，营造氛围感，信息排版可以有左右分布，上下分布，创作的名片使用两种分布同时完成，尾部设计可以设计一个居中边栏，写上斜体外语，完善整体内容，保证高级感。
（PS：名片颜色为pink粉色（doge）————pink老师门下）
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="me.css">
</head>
<body>
<div class="card">
<img src="https://p3-passport.byteimg.com/img/user-avatar/7cc2e36b384f0211840fe24b7c1a0df9~100x100.awebp" alt="地址错误">
<ul class="perinfo">
<li><span>昵称</span> | <em>Romactic</em></li>
<li><span>昵称</span> | <em>网安研究员</em></li>
<li><span>电话</span> | <em>88888888</em></li>
</ul>
<ul class="work">
<li class="workfirst"><span>公司名称</span> | <em>红蓝pk</em></li>
<li><span>地址</span> | <em>火星</em></li>
<li><span>邮箱</span> | <em>123456789@mail</em></li>
</ul>
<p class="last">C'est un plaisir de vous voir</p>
</div>
</body>
</html>
完成HTML部分后的效果
CSS部分
* {
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
font-size: 5px;
list-style: none;
color: rgb(43, 39, 39);
}
.card {
width: 250px;
height: 300px;
background: rgb(254, 212, 219);
margin: 50px auto;
border-radius: 50px;
box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .3);
}
img {
border-radius: 50%;
float: left;
margin: 10px 0 0 10px;
}
.perinfo li {
padding-top: 20px;
font-size: 5px;
}
.perinfo span {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.work {
text-align: center;
}
.work span {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.work li {
padding-bottom: 20px;
}
.workfirst {
margin-top: 30px;
}
.last {
margin: auto;
margin-top: 20px;
text-align: center;
font-size: 10px;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 150px;
border-top: 5px dotted #000;
border-bottom: 5px dotted #000;
border-color: rgb(43, 39, 39);
}
最终效果
结语
参加此次「青训营 X 码上掘金」主题创作活动入营版，对我来说是对HTML，CSS能力的一次小实战，帮助我巩固了相关的细节知识。很高兴能参加这次活动，我成长了不少！
