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

116 阅读2分钟

当青训营遇上码上掘金

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

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

1676386293680.png


主题介绍:主题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…