当青训营遇上码上掘金

一-介绍

主题介绍-我的名片

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

前言

如下，我的目标是将我最喜欢的头像作为形象，制作一个能展示头像、个人名言、个人链接的名片，个人链接包括但不限于我的博客、留言板等。当然，作为一个后端程序员，我对于这方面还是比较无力的，所以我在实现了力所能及的部份外，其他无法实现的效果，我直接去问了最近很火的那个人工智能。

成品展示

二-实现

1.图片存入云服务

我使用的是腾讯云的对象存储服务，本次项目只存储了自己的头像。

2.HTML主体

<div class="content">
    <img src="home.jpg" alt="">
    <div class="content_r clearfix">
        <div class="content_l clearfix">
            <h2>Hi~ 我是本少第一帅，欢迎来到我的个人主页</h2>
            <p class="cc">x x x x x x x x x x x x x x x</p>
            <p class="cc">x x x x x x x x x x x x x x x</p>
            <br>
            <p class="color_1">x x x x x x x x x x x x x x x</p>
            <p class="color_1">x x x x x x x x x x x x x x x</p>
            <br>
            <p class="deeppink">x x x x x x x x x x x x x x x</p>
            <p class="deeppink">x x x x x x x x x x x x x x x</p>
            <div class="link">
                <a href="./test.html" class="dodgerblue">视频测试</a>
                <a href="#" class="deeppink_1">暂未开放</a>
                <a href="#" class="magenta">个人博客</a>
                <a href="https://support.qq.com/products/427109/" class="orange">留言板</a>
            </div>
        </div>
    </div>
</div>

3.实现主体界面的动态效果和其格式

动态效果如上成品的展示，主界面为焦点时，会有一个简单的动态效果。

            .content {
                width: 900px;
                height: 500px;
                margin: 200px auto 0 auto;
                border-radius: 10px;
                background-color: rgba(236, 236, 236, 0.59);
                transition: all 1.0s;
                /*box-shadow: 0px 0px 20px rgba(0,0,0,0.3);*/
            }

            .content img {
                float: left;
                width: 200px;
                height: 200px;
                margin: 150px 0 0 80px;
                border-radius: 100px;
            }

            .content:hover {
                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.52);
            }

            .content_r {
                float: right;
                width: 500px;
                margin: 80px 60px 0 0;
                /*  background-color: pink;*/
            }

            .content_l {
                float: left;
                width: 100%;
                text-align: center;
            }

            .content_l h5 {
                font-size: 17px;
            }

4.实现三段自我介绍的格式

            .cc {
                margin-top: 10px;
                color: #595757;
                font-size: 18px;
            }

            .color_1 {
                color: #595757;
                font-size: 18px;
            }

            .deeppink {
                color: #595757;
            }

5.设置外部链接及其格式

外部链接中的留言板是我免费申请的，各位可以参考一下，可以避免很多的开发工作。

            .link {
                margin-top: 30px;
            }
            
            .link a {
                display: block;
                float: left;
                width: 120px;
                height: 45px;
                margin: 5px 5px 0 0;
                /*  padding: 0 15px;*/
                color: #fff;
                line-height: 45px;
                transition: all 0.8s;
                /*  background-color: deeppink;*/
            }

            .link a:hover {
                background-color: #d19a5f;
            }

            .deeppink_1 {
                background-color: #802645;   /* #ffe78f  #d0000f */
            }

            .dodgerblue {
                background-color: #802645;
            }

            .magenta {
                background-color: #802645;   /*#802645  #d19a5f*/
            }

            .orange {
                background-color: #802645;
            }

三-尾声

最后，如果文章中有纰漏，欢迎各位斧正！