[主题美化]子比主题文章内容右上角加原创标识

使用步骤：后台>>Zibll主题设置>>全局&功能>>自定义代码>>自定义CSS样式

自定义CSS代码

/* 默认样式（桌面端） */
.hs3l-container {
    position: relative; /* 定义容器作为定位上下文，内部的绝对定位元素会以此为参考 */
}
.hs3l-yuanchuang {
    position: absolute; /* 绝对定位，相对于最近的定位上下文元素（即 .hs3l-container） */
    top: 110px; /* 元素距离容器顶部的偏移量为 110 像素 */
    right: 300px; /* 元素距离容器右边的偏移量为 300 像素 */
    z-index: 1; /* 设置堆叠顺序，确保该元素位于其他元素之上 */
    opacity: 0.8; /* 元素透明度设置为 80%，稍微带有透明效果 */
    width: 150px; /* 元素宽度为 150 像素 */
    height: 35px; /* 元素高度为 35 像素 */
    background: url(https://hs3l.com/yuanchuang2.png) no-repeat; /* 设置背景图片，不重复显示 */
    background-size: auto; /* 背景图片使用原始尺寸显示 */
}
/* 手机端样式（屏幕宽度小于768px） */
@media screen and (max-width: 768px) {
    .hs3l-yuanchuang {
        top: 75px; /* 元素距离容器顶部的偏移量调整为 75 像素 */
        right: 3px; /* 元素距离容器右边的偏移量调整为 3 像素 */
        width: 60px; /* 元素宽度调整为 60 像素 */
        height: 10px; /* 元素高度调整为 10 像素 */
        background: url(https://hs3l.com/yuanchuang2.png) no-repeat; /* 保持背景图片，但适配手机屏幕 */
        background-size: contain; /* 背景图片缩放以适应容器大小 */
    }
}
/* 默认样式（桌面端） */
.hs3l-container {
    position: relative; /* 定义容器作为定位上下文，内部的绝对定位元素会以此为参考 */
}

.hs3l-yuanchuang {
    position: absolute; /* 绝对定位，相对于最近的定位上下文元素（即 .hs3l-container） */
    top: 110px; /* 元素距离容器顶部的偏移量为 110 像素 */
    right: 300px; /* 元素距离容器右边的偏移量为 300 像素 */
    z-index: 1; /* 设置堆叠顺序，确保该元素位于其他元素之上 */
    opacity: 0.8; /* 元素透明度设置为 80%，稍微带有透明效果 */
    width: 150px; /* 元素宽度为 150 像素 */
    height: 35px; /* 元素高度为 35 像素 */
    background: url(https://hs3l.com/yuanchuang2.png) no-repeat; /* 设置背景图片，不重复显示 */
    background-size: auto; /* 背景图片使用原始尺寸显示 */
}

/* 手机端样式（屏幕宽度小于768px） */
@media screen and (max-width: 768px) {
    .hs3l-yuanchuang {
        top: 75px; /* 元素距离容器顶部的偏移量调整为 75 像素 */
        right: 3px; /* 元素距离容器右边的偏移量调整为 3 像素 */
        width: 60px; /* 元素宽度调整为 60 像素 */
        height: 10px; /* 元素高度调整为 10 像素 */
        background: url(https://hs3l.com/yuanchuang2.png) no-repeat; /* 保持背景图片，但适配手机屏幕 */
        background-size: contain; /* 背景图片缩放以适应容器大小 */
    }
}
/* 默认样式（桌面端） */
.hs3l-container {
    position: relative; /* 定义容器作为定位上下文，内部的绝对定位元素会以此为参考 */
}

.hs3l-yuanchuang {
    position: absolute; /* 绝对定位，相对于最近的定位上下文元素（即 .hs3l-container） */
    top: 110px; /* 元素距离容器顶部的偏移量为 110 像素 */
    right: 300px; /* 元素距离容器右边的偏移量为 300 像素 */
    z-index: 1; /* 设置堆叠顺序，确保该元素位于其他元素之上 */
    opacity: 0.8; /* 元素透明度设置为 80%，稍微带有透明效果 */
    width: 150px; /* 元素宽度为 150 像素 */
    height: 35px; /* 元素高度为 35 像素 */
    background: url(https://hs3l.com/yuanchuang2.png) no-repeat; /* 设置背景图片，不重复显示 */
    background-size: auto; /* 背景图片使用原始尺寸显示 */
}

/* 手机端样式（屏幕宽度小于768px） */
@media screen and (max-width: 768px) {
    .hs3l-yuanchuang {
        top: 75px; /* 元素距离容器顶部的偏移量调整为 75 像素 */
        right: 3px; /* 元素距离容器右边的偏移量调整为 3 像素 */
        width: 60px; /* 元素宽度调整为 60 像素 */
        height: 10px; /* 元素高度调整为 10 像素 */
        background: url(https://hs3l.com/yuanchuang2.png) no-repeat; /* 保持背景图片，但适配手机屏幕 */
        background-size: contain; /* 背景图片缩放以适应容器大小 */
    }
}

在编辑文章的时候，哪篇文章需要（原创标识），就在编辑的时候，将下方代码放入自定义HTML中即可

<div class="hs3l-yuanchuang"></div>
<div class="hs3l-yuanchuang"></div>
<div class="hs3l-yuanchuang"></div>

来源：子比主题官网社区