当青训营遇上码上掘金

在本次任务中，因为基础一般，所以选择“我的名片 ”进行创作，我们平时在博客上看文章时，会看到个人名片在个人博客网站上的位置一般是在首页右上角，一点开网站就能看见，信息量并不多，但是对于访客说，可以直观快速的了解这个网站的站长信息，所以我们用html标签+css写一个个人名片吧。 大家可以先一睹为快：

步骤

第一步：先写一个div，定义其宽为400px的长方形，10px的圆角，背景色为白色。 第二步：取消h1标签父类元素的字体大小以及粗细来重新定义。电话邮箱等基本信息，用li列表来实现。 第三步：姓名用标签h1定义，职位用p定义。

```第一步
    <div id="card">
    
    </div>
    #card {
            position: relative;
            width: 400px;
            margin: 100px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px #ddd;
            border-radius: 10px;
        }

```第二步重新定义父类2标签
```#card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 20px;
            margin-left: -50px;
            box-shadow: 0 0 10px #ddd;
            
        }

        #card h1 {
            font-size: 20px;
            margin-top: 120px;
            text-align: center;
            color: #999;
        }

        #card p {
            font-size: 16px;
            text-align: center;
            color: #999;
        }

        #card ul {
            margin-top: 20px;
            text-align: center;
        }

        #card ul li {
            display: inline-block;
            margin: 10px 10px;
            color: #999;
        }

        #card ul li i {
            font-size: 20px;
            color: #999;
        }

        #card ul li a {
            color: #999;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }
    
```第三步
``` <img src="https://bkimg.cdn.bcebos.com/pic/a50f4bfbfbedab64034ff52fb97cb8c379310b55b080?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxODA=,g_7,xp_5,yp_5" alt="头像">
        <h1>张三</h1>
        <p>技术开发</p>
        <ul>
            <li><i class="iconfont icon-dianhua"></i><a href="tel:123456789">123456789</a></li>
            <li><i class="iconfont icon-youxiang"></i><a href="mailto:123456789@qq.com">123456789@qq.com</a></li>
            <li><i class="iconfont icon-weixin"></i>zhangsan</li>
        </ul>