「我的名片创作灵感|青训营 X 码上掘金」当青训营遇上码上掘金 1.创作要求：名片是向人介绍自我的重要工具，作为一名程

当青训营遇上码上掘金

1.创作要求：

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

2.我实现的效果：

主要内容包括：

个人名片的大标题
姓名
年龄
爱好
工作单位
联系方式
住址
邮箱
可提供的服务
以及可以粘贴个人头像的部分

3.我的设计思路：

STEP1-思路灵感分析：

我认为名片是一张长方形的小卡片，是可以方便的递给别人的，其中包含如姓名、年龄、爱好、工作单位、联系方式、住址、邮箱等个人信息以供别人了解，最好上面还附上个人照片，让别人能够认出你来，还要展示自己能提供的服务或支持，方便别人能知道你能满足哪些客户需求，更有可能联系你。

STEP2-基本内容实现：

在HTML将个人名片的大标题、姓名、年龄、爱好、工作单位、联系方式、住址、邮箱、可提供的服务、以及可以粘贴个人头像的部分添加合适的元素中

STEP-CSS美化：

首先给长方形名片设置圆角，然后给长方形名片的背景添加蓝色的渐变色，给长方形名片设置黑色的粗边框，再把名片内容设置好合适的字体，就可以让整个名片看上去更美观。

4.代码实现：

HTML：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Fundamental CSS comprehension</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>

  <section class="card">
    <header>
      <h2>个人名片</h2>
    </header>
    <article>
      <img src="https://img1.baidu.com/it/u=3828044059,2336306651&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="A picture of Chris - a man with glasses, a beard, and a silly wooly hat">
      <p><strong>姓名：</strong>XXX<br>
        <strong>年龄：</strong>XX<br>
        <strong>爱好：</strong>XX、XX、XX<br>
        <strong>工作单位：</strong>XXXX公司<br>
          <strong> 联系方式：</strong>XXXXXXXXXXX<br>
            <strong> 住址：</strong>XXX省XXX市XXX区XXX<br>
        <strong>邮箱：</strong>XXXXXXX@XX.com<br>
    </article>
    <footer>
      <p>提供XXX等方面的服务与支持，有需要请联系</p>
    </footer>
  </section>

  </body>
</html>

CSS：

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

/* Selectors to be matched up with rulesets */
/* Rulesets to be matched up with selectors */

.card{
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-image: linear-gradient(to right,#396afc, #78ffd6);
  border: 0.2em solid black;
  border-radius: 1.5em;
}

.card header{
  background-image: linear-gradient(to right,#396afc, #78ffd6);
  border-radius: 1.5em 1.5em 0 0;
  height: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: middle;
}

.card footer{
  background-image: linear-gradient(to right,#396afc, #78ffd6);
  border-radius: 0 0 1.5em 1.5em;
  height: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.card article img{
  max-height: 100%;
  float: right;
}

article{
  height: 11em;
  color: white;
  background-image: linear-gradient(to right,#396afc, #78ffd6);

  padding-left: 10px;
  vertical-align: middle;
}

h2{
  font-size: 2em;
  padding-left: 10px;
}

footer p{
  font-size: 1.5em;
  padding-left: 10px;
}