个人名片学习

当青训营遇上码上掘金，这次的活动主题中我选择了个人名片展示

一、简介：

• 名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。

二、涉及技术&知识点：

• 本次青训营中我选择的方向为前端方向，在名片展示中，涉及到的知识内容即我们常说的HTML与CSS

三、实践过程：

这次的实践过程大致分为五步

• 构思大体结构

  首先，名片的展示要求突出个人特点以及个人审美，找出个人身上最想强调的三点放大介绍，我选择了简介、喜欢的电影以及个人爱好三个部分，构思好对应内容，搜索参考资料进行下一步。

        <div class="photo"><img src="1.jpg" alt=""></div>
        <h1>Introduction</h1>
        <h2></h2>
        <p></p>
        <a href="#"></a>
    </div>
    <div class="card">
        <div class="photo"><img src="1-1.jpg" alt=""></div>
        <h1>Movie</h1>
        <h2></h2>
        <p></p>
        <a href="#"></a>
    </div>
    <div class="card">
        <div class="photo"><img src="3.png" alt=""></div>
        <h1>Hobby</h1>
        <h2></h2>
        <p></p>
        <a href="#"></a>

• 添加模板样式

  对上述构建出的大致板块添加样式。即三个相同配置的板块，需要居中等量分布在大背景中，为不显单调，选择一个喜欢的颜色将大背景进行渐变填充。

  • 一段为背景，二段为相同配置的板块

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(200deg,#a56adc,#41285d);

    position: relative;
    width: 300px;
    height: 450px;
    margin: 20px;
    background-color: #758a99;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    flex-shrink: 0;

其中放入展示的图片要将溢出板块边缘进行处理，以免图片过大影响效果

• 细化内容

  将构思好的内容填入，对相应的内容标签进行样式填充

.card h1{
    position: absolute;
    top: 370px;
    transition: 0.5s;
}
.card h2{
    margin-top: 220px;
    width: 80%;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.card p{
    width: 90%;
    text-indent: 32px;
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 30px;

• 优化各种点击效果

四、总结思考：

• 名片展示中还有各种优化空间

  比如大背景太过单调，可以对背景进行进一步样式处理；对于名片中的了解更多可以链接更多信息网页进一步推进对名片的认识；点击或者鼠标悬停时的效果可以更加酷炫等

五、 引用参考：

• 文章中代码片段参考于B站博主艾恩小灰灰
• 感谢B站博主山羊の前端小窝、码小渣、艾恩小灰灰、9510代码设计等相关视频的知识分享