一.前言

Zyyo大佬做的个人主页超级好看，但是默认样式和图片比较少，这次来教大家自定义一下

目前我做了一个模块：

不过为了方便，我并未将CSS样式写入style.css，如果你有强迫症，可以写进去。

二.准备工具：

阿里巴巴矢量图标库 https://www.iconfont.cn/

脑子

三.新开一个标题

1.直接复制上面的

2.这个时候去阿里巴巴图标库，搜索你想要的图标，比如设备

3.然后挑选一个合适的图标

4.将颜色设置为白色，然后点击复制SVG代码，把原来的SVG替换掉

5.再修改一下标题

四.添加列表

1.先创建一个div框，让左边缩进一下，体现列表感

<div style="margin: 8px 15px;">
    
</div>

当然，你也可以修改style.css中的

来获得不同界面中的缩进

2.添加元素

<div style="margin: 8px 15px;">
    <div class="description" style="align-items: center;display: flex;color:#fff;margin-bottom:5px">***SVG***<strong>&nbsp;Xiaomi 13</strong> <span class="purpleText textBackground">12+512G</span> <span class="purpleText textBackground">远山蓝</span></div>
    <span style="font-size:15px;padding-left:5px">目前正在使用的主力机</span>
    <!-- 第一行必需使用上面这个 --><!-- 因为这个没有margin-top:20px -->
    <div class="description" style="align-items: center;display: flex;color:#fff;margin-bottom:5px;margin-top:20px">***SVG***<strong>&nbsp;Xiaomi Pad 6s Pro</strong> <span class="purpleText textBackground">16+1TB</span> <span class="purpleText textBackground">黑色</span> </div>
    <span style="font-size:15px;padding-left:5px">超级爽的平板，从Pad5换上来的</span>
    <!-- 后面的只要复制下面这个就行-->
    <div class="description" style="align-items: center;display: flex;color:#fff;margin-bottom:5px;margin-top:20px">***SVG***<strong>&nbsp;Xiaomi Pad 6s Pro</strong> <span class="purpleText textBackground">16+1TB</span> <span class="purpleText textBackground">黑色</span> </div>
    <span style="font-size:15px;padding-left:5px">超级爽的平板，从Pad5换上来的</span>

    <div class="description" style="align-items: center;display: flex;color:#fff;margin-bottom:5px;margin-top:20px">***SVG***<strong>&nbsp;Xiaomi Pad 6s Pro</strong> <span class="purpleText textBackground">16+1TB</span> <span class="purpleText textBackground">黑色</span> </div>
    <span style="font-size:15px;padding-left:5px">超级爽的平板，从Pad5换上来的</span>
</div>

SVG处请前往阿里巴巴图标库自行查找图标，颜色为白色，大小为24

剩下的自己摸索吧，因为我这个html写的也比较生草