文章最后更新时间:
探索子比主题美化技巧,通过自定义首页动态分类标题,让您的网站内容更加生动有序。无需复杂代码,简单几步即可打造独一无二的网站首页,吸引访客目光,提升用户留存率。
效果图:
![图片[1]-子比主题美化 – 首页自定义动态分类标题-阿七源码](https://blog.wmr7.com/wp-content/uploads/2025/05/1.jpg)
代码部署
后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式
.box-body.notop {
background: var(--main-bg-color);
padding: 5px;
padding-left: 1.2em;
border-radius: 10px;
margin-bottom: 10px;
}
.title-theme {
position: relative;
padding-left: 1.3em;
font-size: 20px;
margin: 5px;
}
.title-theme::before {
content: '';
top: -30px;
width: 50px;
height: 70px;
left: -28px;
background: url(图片链接地址);
box-shadow: 0 0 black;
background-size: cover;
}
.title-theme small {
font-size: 60%;
margin-left: 20px;
}
.title-theme .ml10::before {
position: absolute;
content: '';
width: 1px;
background: var(--theme-color);
top: 30%;
left: 115px;
bottom: 16%;
}
第二种演示:
/* 子比主题美化 – 首页自定义动态分类标题开始《阿七源码》 */
body.home .box-body.notop {
background:var(--main-bg-color);
padding:5px;
padding-left:1.2em;
border-radius:10px;
margin-bottom:10px;
}
body.home .title-theme {
position:relative;
padding-left:1.3em;
font-size:20px;
margin:5px;
}
body.home .title-theme::before {
content:'';
top:-20px;
width:60px;
height:60px;
left:-28px;
background:url('/wp-content/themes/zibll-child/images/热气球.svg');
box-shadow:0 0 black;
background-size:cover;
}
body.home .title-theme small {
font-size:60%;
margin-left:20px;
}
body.home .title-theme .ml10::before {
position:absolute;
content:'';
width:1px;
background:var(--theme-color);
top:30%;
left:115px;
bottom:16%;
}
/* 子比主题美化 – 首页自定义动态分类标题结束 */
两个任选其一即可 style标签
<style>
</style>
© 版权声明
THE END
暂无评论内容