当青训营遇上码上掘金
主题 1：我的名片
- 名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
前言
很高兴能够参加「第五届青训营」前端专场，看到本次主题创作活动的四个主题介绍，我还是对第一个主题“我的名片”最感兴趣，制作一张线上的个人名片，向外界展示自己的同时，又能够方便有需要的人联系自己。
名片简介
名片，又称卡片（粤语写作卡（kā）片），中国古代称名刺，是标示姓名及其所属组织、公司单位和联系方法的纸片。名片是新朋友互相认识、自我介绍的最快有效的方法。交换名片是商业交往的第一个标准官式动作。
HTML部分
我个人喜欢比较简约的款式，主要是突出重点信息，让别人能够快速的捕捉到关键信息。在布局中，body分成cd和kong两部分，整体的HTML框架代码都是最基础最简单的框架，没有比较难或者冷门的代码。
<html lang="en">
<head>
<title>我的名片</title>
</head>
<body>
<div class="cd">
<div class="center"></div>
</div>
<div class="kong">
<h2>麦浪mailang</h2><br/>
<p>性 别：女<br/>
职 业：学生党一枚<br/>
Q Q：86732xxxx<br/>
电 话：138920xxxxx<br/>
邮 箱：muxxxx@xinsec.cn<br/>
坐 标：陕西省-西安市<br/>
个 签：喜欢鲜花 喜欢浪漫 喜欢一切稀碎的仪式感<br/>
座右铭：越努力越幸运<br/>
</div>
</div>
</body>
</html>
CSS部分
CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，能够为每个 HTML 元素定义样式，并将之应用于我希望的任意多的页面中。如果需要进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
*{margin: 0; padding: 0;}
body{background-image:url("https://5b0988e595225.cdn.sohucs.com/images/20181013/280dd3085e754a5a8795b65f6a33476a.jpeg");background-repeat:round;}
.cd{
width: 422px;
height: 422px;
position: absolute;
top: 25%;
left: 10%;
z-index: 2;
border-radius: 50%;
border: 10px solid #fff;
box-shadow: 5px 5px 15px #000;
background: url("http://mms2.baidu.com/it/u=1276768017,3557748109&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500") no-repeat;
}
.center{
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
z-index: 3;
border: 5px solid #fff;
background-image: url("http://mms2.baidu.com/it/u=2450492801,2570408754&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=240&h=320");
background-position: center center;
background-repeat: no-repeat;
}
.kong{
position: absolute;
top: 25%;
left: 50%;
}
h2{
font-family: MD;
font-size: 110px;
color: 3913805;
}
p{
width: 556px;
height: 250px;
font-family: "微软雅黑";
padding-left: 30px;
line-height: 30px;
background-color: rgba(255, 255, 255, 0.3);
box-sizing: border-box;
}
效果展示
总结
虽然项目代码相对比较简单，但整体搭配呈现效果，我还是很满意的，作为刚接触前端时间不久的小白，希望在后续的青训营课程中，自己能有更多的收获，学习到更多的技术知识，深入前端领域。
