主题

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

引入

名片，又称卡片，在现代生活中它是姓名以及联系方法等个人信息的载体。一般名片为纸质的，但随着互联网的发展，出现了电子名片。名片是新朋友互相认识、自我介绍的最快有效的方法。名片的存在可以让更多人认识自己。在学习前端的过程中，我利用HTML和CSS制作了一个很简单的电子名片。

效果展示

下面来看一下我制作的名片呈现出来的效果吧！

这张个人名片的布局十分简单，只有基本的信息以及头像。姓名用H标签，主要介绍信息用li标签实现。

设计过程

HTML部分

这部分，姓名用标签h2定义，span标签定义学生，然后电话、邮箱、地址、爱好和简介用li列表来实现，图片用img来实现。

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>个人名片</title>
</head>
<body>
<div class="card">
  <section>
    <h2>小橘猫<span>学生</span> </h2>
    <img src="<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>个人名片</title>
</head>
<body>
<div class="card">
  <section>
    <h2>小橘猫<span>学生</span> </h2>
    <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f4af0dcc828c4c24b464f5d9cb1ddaff~tplv-k3u1fbpfcp-watermark.image?" alt="">
    <ul>
      <li>电话 :1234567</li>
      <li>邮箱 :jumao@qq.com</li>
      <li>地址 : 翻斗花园</li>
      <li>爱好 : 吃饭、睡觉</li>
      <li>简介 : 一只可爱的小橘猫~</li>
    </ul>
  </section>
</div>

CSS部分

接下来是CSS部分，这部分首先设计的是背景，背景的大小为宽为800px，高为460px，10px的圆角，背景色为浅粉色，然后将背景居中显示。然后是名字字体设置，它的font-size为50px，letter-spacing为.1em，margin-bottom为66px。然后学生这部分的font-size:为28px，margin-left为50px。然后图片的话我是靠右，然后宽度和高度都为150px然后设置了一个圆角。最后正文字体，我设置了line-height为40px，font-size为20px。

 * {
    margin: 0;
    padding: 0
}
 
.card {
    width: 800px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -230px;
    margin-left: -400px;
    background: #f1e8e6;
    overflow: hidden;
    border-radius: 10px;
}
.card section {
    width: 600px;
    position: absolute;
    left: 100px;
    top: 80px;
    z-index: 9;
}
 
.card section h2 {
    font-size: 50px;
    letter-spacing: .1em;
    margin-bottom: 66px;
}
 
.card section span {
    font-size: 28px;
    font-weight: normal;
    margin-left: 50px;
    letter-spacing: normal;
}
 
.card img {
    float: right;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}
.card section ul li {
    list-style: none;
    line-height: 40px;
    font-size: 20px;
}

写在最后

因为我也是刚开始接触前端，所以能力有限，只能做出来这种不是特别难的名片，但是随着我的不断学习和进步，我会试着进一步完善我的名片的。

「青训营 X 码上掘金」一个简单的名片

主题

引入

效果展示

设计过程

HTML部分

CSS部分

写在最后