主题创作1：我的名片

前言

很高兴能参加本次寒假青训营活动，在这次青训营活动中我学到了挺多的知识，看到这个青训营X码上掘金活动，我就想来参加一下，由于我是在前端基础班，因此我就在主题1和主题2中选择了主题一，用代码的方式介绍自己，这是一个自己DIY名片，我很感兴趣（当然也有比较简单易创作的原因），以下是我的创作过程。

创作

• HTML代码片段

    <div class="body">
        <div class="left">
            <div class="left-top">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb2061389-0ae4-4ba1-8402-8c8b9fdd6703%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678258432&t=e199e2f2ff408ac7eb0555692e656563" alt="图片加载中">
            </div>
            <div class="left-bottom">折木奉太郎</div>
            <div class="bottom-text">前端工程师</div>
        </div>
        <div class="right">
            <div class="line"></div>
            <div class="info-box">
                <div class="info">姓名 :<span>折木奉太郎</span></div>
                <div class="info">年龄 :<span>20岁</span></div>
                <div class="info">年级 :<span>大二</span></div>
                <div class="info">邮箱 :<span>y_print@163.com</span></div>
                <div class="info">电话号码 :<span>18695883782</span></div>
                <div class="info">兴趣爱好 :<span>打篮球,跑步,写代码。</span></div>
                <div class="info">个人简介 :<span>一名热爱前端的小白,热爱技术,爱思考,对前端开发很感兴趣,爱好编程。</span></div>
            </div>
        </div>
    </div>

个人名片我认为简约最好，要能突出重点信息，让别人能迅速捕捉到关键信息，在布局中我定义了一个大盒子body分成left和right两部分，布局方式采用flex布局来让两个盒子位于同一行，在left中分三层分别是图片，姓名和补充信息，在right盒子中分成了两块，一块用来画线条，增加流畅度，另一块用来展示个人信息， 整个盒子采用线性渐变来美化界面。

• CSS片段

       .body{
            width: 550px;
            height: 300px;
            margin: 20px auto;
            border: 1px solid blue;
            display: flex;
            border-radius: 10px;
            overflow: hidden;
            background: linear-gradient(to right, #4bb0ff, #9b8cff);
        }
        .left{
            width: 40%;
            height: 100%;
            border-right: 1px solid gray;
        }
        .right{
            width: 60%;
            height: 100%;
            display: flex;
        }
        .left-bottom{
            width: 100%;
            text-align: center;
            font-size: 20px;
            margin-top: 10px;
        }
        .bottom-text{
            width: 100%;
            text-align: center;
            margin-top: 10px;
            color: purple;
        }
        img{
            width: 100%;
        }
        .line{
            width: 0;
            height: 200px;
            border: 2px solid skyblue;
            margin-left: 40px;
            margin-top: 40px;
        }
        .info-box{
            width: 100%;
            margin-top: 30px;
            height: 200px;
            margin-left: 20px;
        }
        span{
            margin-left: 10px;
            font-size: medium;
            color:black
        }
        .info{
            font-size: 18px;
            color: lightgreen;
            margin-bottom: 5px;
        }

背景颜色渐变在CSS中我通过使用background: linear-gradient(to right, #4bb0ff, #9b8cff);设置渐变色从左至右，实现了背景颜色的渐变。关于右边盒子的线，我通过设置width:0，height: 200px;，border: 2px solid skyblue;实现了一条200px的高度的线，在右侧定义盒子大小和字体颜色等样式实现了个人信息的展示。 完整代码:

成果

最后

笔者接触前端想来已有一年时间，前端技术也正在深入框架，学习更深入的前端知识，希望在后续的青训营课程中，自己能有更好的收获，学习到更多的技术知识，深入前端领域。