使用步骤:后台>>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
- 最新
- 最热
只看作者