这是一款子比主题的滚动公告条的代码,很简约,而且什么网站都是通用的,喜欢的自行部署吧!
代码部署
定位:WP后台–>>外观–>>小工具–>>自定义HTML,将下面的代码放到里面,放到你自己喜欢的位置!
<div class="zibi2024-banner tf-banner">
<marquee>
<span style="color:#996300">特别声明:</span>
注册会员根据级别享有相关下载优惠,请仔细辨别。所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵, 你下载的资源和程序源码组件因其特殊性均为可复制品,所以不支持任何理由的退款兑现,请认真阅读本站声明和相关条款后再点击支付下载。
</marquee>
</div>
<style>
.zibi2024-banner.tf-banner {
position: relative;
background-image: url('https://res.qkget.cn/wp-content/themes/ITLY/images/icon-recommend-top-bg.svg');
background-size: auto 100%;
display: flex;
justify-content: center;
align-items: center;
color:#555;
font-size:22px;
padding:20px;
letter-spacing: 2px;
border-radius: 5px;
}
.zibi2024-banner.tf-banner::before,
.zibi2024-banner.tf-banner::after {
content: '';
position: absolute;
top:0;
background-size: auto 100%;
background-repeat: no-repeat;
height: 100%;
width: 200px;
display:none;
}
.zibi2024-banner.tf-banner::before {
background-image: url('https://res.qkget.cn/wp-content/themes/ITLY/images/icon-recommend-top-left.svg');
left: 0;
}
.zibi2024-banner.tf-banner::after {
background-image: url('https://res.qkget.cn/wp-content/themes/ITLY/images/icon-recommend-top-right.svg');
background-position: center right;
right: 0;
}
@media screen and (max-width:600px){
.zibi2024-banner.tf-banner{
padding:10px;
font-size:18px;
}
}
</style>
图片素材:
THE END








评论