[子比主题美化教程] – 自定义背景文字介绍的样式代码

温馨提示:本文最后更新于2024-04-18 00:09:48,某些文章具有时效性,若有错误或已失效,请在下方留言。

效果图:

图片[1]-[子比主题美化教程] – 自定义背景文字介绍的样式代码-蛙言资源网

给子比主题文章下面加一个文章介绍的背景样式代码,不仅可以在文章,看自己喜欢哪个地方就加到哪里!

代码教程:

1,CSS代码,放在后台css代码里

/*文章页新增声明*/
 .sys-item-99 {
    background-image: url(背景图片地址1);
    margin-top: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
}
.sys-item-88 {
    background-image: url(背景图片地址2);
    margin-top: 10px;
    height: 40px;
   line-height: 40px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-weight: 500;
}
/*文章页新增声明*/

图片已经给大家打包好,下载后上次到自己服务器,不喜欢的自己去找其他图片

背景图片

2,html代码,放到自己喜欢的地方即可!!比如文章内容下方.

<div class="sys-item-99"><span>自定义文字内容1</span> </div>
<div class="sys-item-88"><span>自定义文字内容2</span> </div>
修改文件的美化请注意备份,主题升级会覆盖文件
网创项目仅作分享,不提供任何收益保障
会员特权保障
资源来源网络
有偿安装调试
© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
畅所欲言 共7条

请登录后发表评论

    • 蛙言的头像-蛙言资源网赞助会员蛙言等级-LV6-蛙言资源网作者0
    • 蛙言的头像-蛙言资源网赞助会员蛙言等级-LV6-蛙言资源网作者0