「青训营 X 码上掘金」主题创作活动 | 我的名片

当青训营遇上码上掘金

情人节在宿舍学习写代码，看见了旁边单身了很多年的二狗在孤寡地看爱情小说，于是来了灵感便有了以下的种种

也是第一次写网页代码，参考了很多大佬的文章和代码，受益匪浅

主题介绍：主题1-名片

名片是向别人介绍自我的重要工具，最早出现在封建社会，在中国古代称为名刺。现代名片往往是新朋友相互认识、职场中人们相互介绍的第一动作。名片里往往包含姓名、联系电话、电子邮箱、个人网站等。作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

第一步：
确定大致布局，选择大小为600*800
然后是照片-名字-联系方式 ，照片占1/2，然后名字、联系方式字体依次变小变浅

    .card{
                height: 800px;
                width: 600px;
                background-color: rgb(255, 255, 255);
                margin: 0 auto;
                box-shadow: 0px 0px 10px #949393;
                padding: 50px;
                text-align: center;
            }

第二步： 确定图片位置，将图片变为圆形，更适合头像 （以下只是部分代码）

    img{
                height: 400px;
                width: 400px;
                margin: 0 auto;
                display: block;
                <!--调整为圆形-->
                border-radius: 50%;
                box-shadow: 0px 0px 20px #949393;
                margin-top: 40px;
            }

怎么看都感觉有点不太对劲，再加了一个阴影舒服多了,更适合平时的使用习惯

第三步：
加入个人信息，把文字都居中放置，然后调整一下颜色和字体大小就ok了 最后加了一个dfn属性，鼠标移动到相应的文字上面会自动显示缩略的文字

    <address>
        <dfn title="孤寡孤寡孤寡">电话:2222222</dfn>
        <br />
        <dfn title="还是孤寡孤寡孤寡">E-mail:33@163.com</dfn>
    </address>

全部代码在这里，整个名片是十分简陋的，大概用了一个小时：
code.juejin.cn/pen/7199632…