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

使用步骤:后台>>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; /* 背景图片缩放以适应容器大小 */
    }
}

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

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

来源:子比主题官网社区

© 版权声明
THE END
喜欢就点一下吧~
点赞14 分享
留言 共1条
头像
来都来了,留个言再走呗~
提交
头像

昵称

取消
昵称表情代码图片快捷回复

广告

文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月
文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月 文字广告位10/月

温馨提示:请在上面搜索| 查找更多免费资源,如需广告位请联系站长QQ 272840227