文章最后更新时间：2025-03-08 19:56:34

这是一款仿Mac三条文章底部样式，不是在附件下载的下面是在文章的下面，一定要看清楚，喜欢的自行部署一下吧！

!图片[1] – 子比主题 – 仿Mac三条文章底部样式

代码部署

本文隐藏内容

首先将下面的代码放到：子比主题–>>自定义CSS样式即可！

<div><div><div><p><span>.sys-item-</span><span>12</span><span> </span><span>{</span><span></span></p></div><div><p><span>        background-image: </span><span>url</span><span>(</span><span>https</span><span>://img.alicdn.com/imgextra/i1/2210123621994/O1CN01e5LDEM1QbInIe9Get_!!2210123621994.png);</span><span></span></p></div><div><p><span>        margin-top: 10px;</span></p></div><div><p><span>        height: 40px;</span></p></div><div><p><span>        line-height: 40px;</span></p></div><div><p><span>        font-size: 14px;</span></p></div><div><p><span>        color:</span><span> #fff;</span><span></span></p></div><div><p><span>        text-align: center;</span></p></div><div><p><span>        border-radius: 6px;</span></p></div><div><p><span>        font-weight: </span><span>500</span><span>;</span></p></div><div><p><span>    </span><span>}</span><span></span></p></div><div><p><span>    .sys-item-</span><span>13</span><span> </span><span>{</span><span></span></p></div><div><p><span>        background-image: </span><span>url</span><span>(</span><span>https</span><span>://img.alicdn.com/imgextra/i4/2210123621994/O1CN01Tk7v4S1QbInJU77xK_!!2210123621994.png);</span><span></span></p></div><div><p><span>        margin-top: 10px;</span></p></div><div><p><span>        height: 40px;</span></p></div><div><p><span>        line-height: 40px;</span></p></div><div><p><span>        font-size: 14px;</span></p></div><div><p><span>        color:</span><span> #fff;</span><span></span></p></div><div><p><span>        text-align: center;</span></p></div><div><p><span>        border-radius: 6px;</span></p></div><div><p><span>        background-size: auto </span><span>100</span><span>%;</span></p></div><div><p><span>        font-weight: </span><span>500</span><span>;</span></p></div><div><p><span>    </span><span>}</span><span></span></p></div><div><p><span>    .sys-item-</span><span>14</span><span> </span><span>{</span><span></span></p></div><div><p><span>        background-image: </span><span>url</span><span>(</span><span>https</span><span>://img.alicdn.com/imgextra/i2/2210123621994/O1CN01hk3dn41QbInJUNxQN_!!2210123621994.png);</span><span></span></p></div><div><p><span>        margin-top: 10px;</span></p></div><div><p><span>        height: 40px;</span></p></div><div><p><span>        line-height: 40px;</span></p></div><div><p><span>        font-size: 14px;</span></p></div><div><p><span>        color:</span><span> #fff;</span><span></span></p></div><div><p><span>        text-align: center;</span></p></div><div><p><span>        border-radius: 6px;</span></p></div><div><p><span>        background-size: auto </span><span>100</span><span>%;</span></p></div><div><p><span>        font-weight: </span><span>500</span><span>;</span></p></div><div><p><span>    </span><span>}</span></p></div></div><pre>.sys-item-12 {
        background-image: url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01e5LDEM1QbInIe9Get_!!2210123621994.png);
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        font-weight: 500;
    }
    .sys-item-13 {
        background-image: url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01Tk7v4S1QbInJU77xK_!!2210123621994.png);
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        background-size: auto 100%;
        font-weight: 500;
    }
    .sys-item-14 {
        background-image: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01hk3dn41QbInJUNxQN_!!2210123621994.png);
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        background-size: auto 100%;
        font-weight: 500;
    }</pre></div><code data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">.sys-item-12 {
        background-image: url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01e5LDEM1QbInIe9Get_!!2210123621994.png);
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        font-weight: 500;
    }
    .sys-item-13 {
        background-image: url(https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01Tk7v4S1QbInJU77xK_!!2210123621994.png);
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        background-size: auto 100%;
        font-weight: 500;
    }
    .sys-item-14 {
        background-image: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01hk3dn41QbInJUNxQN_!!2210123621994.png);
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        background-size: auto 100%;
        font-weight: 500;
    }</code>

然后将下面代码添加到：文章页面–>>在文章内容后–>>插入内容即可！

<div><div><div><p><span><</span><span>div </span><span>class</span><span>=</span><span>"sys-item-12"</span><span>><</span><span>span</span><span>></span><span>支持 macOS</span><span><</span><span>/span</span><span>></span><span> Ventura </span><span>12.</span><span>x</span><span><</span><span>/div</span><span>></span><span></span></p></div><div><p><span></span><span><</span><span>div </span><span>class</span><span>=</span><span>"sys-item-13"</span><span>><</span><span>span</span><span>></span><span>支持 macOS</span><span><</span><span>/span</span><span>></span><span> Ventura </span><span>13.</span><span>x</span><span><</span><span>/div</span><span>></span><span></span></p></div><div><p><span></span><span><</span><span>div </span><span>class</span><span>=</span><span>"sys-item-14"</span><span>><</span><span>span</span><span>></span><span>支持 macOS</span><span><</span><span>/span</span><span>></span><span> Ventura </span><span>14.</span><span>x</span><span><</span><span>/div</span><span>></span></p></div></div><pre><div class="sys-item-12"><span>支持 macOS</span> Ventura 12.x</div>
<div class="sys-item-13"><span>支持 macOS</span> Ventura 13.x</div>
<div class="sys-item-14"><span>支持 macOS</span> Ventura 14.x</div></pre></div><code data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><div class="sys-item-12"><span>支持 macOS</span> Ventura 12.x</div>
<div class="sys-item-13"><span>支持 macOS</span> Ventura 13.x</div>
<div class="sys-item-14"><span>支持 macOS</span> Ventura 14.x</div></code>

!图片[2] – 子比主题 – 仿Mac三条文章底部样式

https://ootd.party/wp-content/themes/twentytwentyone/func.php