青训营 X 码上掘金主题创作活动入营版——我的名片

当青训营遇上码上掘金

主题：我的名片

作品链接：code.juejin.cn/pen/7196157…

因为时间问题没有对非正常宽高比的设备适配，大家在预览的时候建议使用全屏哦！

一点点想法

名片是向人介绍自我的重要工具，但是我们不如把眼界放大一点，为什么名片一定要浓缩在一张小小的卡片上呢，一个网页、一篇博客也是一个非常好的名片。

因此此次创作中，我并未将信息完全浓缩于一张卡片这样的形式，而是通过一个网页展现名片

成品如下：

核心思路

我们的核心就是三大块区域：

• 顶部“我的名片”
• 左侧头像栏
• 右侧内容卡片区

左右分栏结构的实现

在各种网页中常常使用左右分栏结构来完成网页的左右分栏布局。

将左侧栏div和右侧栏div分割为两个板块，装入一个大的div盒子中，然后对大的div盒子使用display：flex

如图，是本模块最初实现的左右布局。

在一般开发过程中为了方便，会为盒子设定预先的背景色。

<!-- 圣杯布局完成自我介绍页面 -->
    <div>
        <!-- 顶部固定 -->
        <div class="top">
            <h1>自我介绍</h1>
        </div>
        <div class="content">
            <div class="left">
              <!-- 左侧内容 -->
              
            </div>
            <div class="right">
               <!-- 右侧内容 -->
            </div>
        </div>

这里的content就是绿、紫两个颜色包裹的大盒子

left right 分别代表左右两个子盒子

flex实现卡片布局

如右侧的卡片布局看着清晰明了

左侧是大标题，分割线右侧是内容。

我们同样使用flex来实现，标题和右侧内容均各用一个盒子包裹，然后flex即可。

那么中间的分割线是不是用border-right实现的呢？可以，但我不是这样做

我使用了<hr/>这个不太常用的分割线标签，在flex方向为横向时，分割线也会自动竖向，非常nice好用

朦胧色块

相比有些同学一定对我这个头像栏下方的绿色朦胧区域很好奇。

怎么实现的呢？

很简单：首先创建一个盒子，背景设为你想要的颜色。

重点来啦，然后用filter这个属性设置filter: blur（100px）就饿可以实现这样的朦胧了

然后设置定位为绝对定位，z-index为-1，调整位置和宽高就行啦。

.bg {
        background: #bff1e3;
        filter: blur(100px);
        width: 30%;
        height: 30%;
        position: absolute;
        z-index: -1;
        top: 300px;
    }