![图片[1]- 子比主题添加会员开通引导区块](https://www.dh139.cn/wp-content/uploads/2025/11/20250326-060230-XkqQV.gif)
代码用自定义 HTML 放至 WordPress 后台——外观——小工具——顶部全宽度区块或文章内容上方、文章页顶部全区块:
<div class="n_banner_inner">
<div class="img-info">!
<div class="info">也想出现在这里?
<a rel="nofollow noopener noreferrer" href="https://wpa.qq.com/msgrd?v=3&uin=915169889&site=qq&menu=yes&jumpflag=1" target="_blank">联系我们</a>吧</div>
</div>
<a class="pay-vip" href="javascript:;">
<div class="Banner-adTag">广告</div>
<img class="tirr" src="https://tc.pengqi.club/i/2024/01/01/659204d702683.png" alt="信息">
</a>
</div>
<style>
/*定位*/
.n_banner_inner {
position: relative;
}
/*提示信息*/
.n_banner_inner .img-info {
position: absolute;
right: 12px;
top: 9px;
padding: 0;
text-align: right;
color: #fff;
}
.n_banner_inner .img-info i {
position: relative;
display: inline-block;
color: #007bff;
font-size: 20px;
line-height: 19px;
text-align: center;
z-index: 9;
font-style: inherit;
}
.n_banner_inner .img-info .info {
position: absolute;
bottom: 5px;
right: 0;
width: 0;
padding: 5px 0;
overflow: hidden;
background: #007bff;
border-radius: 10px;
line-height: 10px;
text-align: center;
font-size: 10px;
color: #fff;
white-space: nowrap;
-webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
-moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
-ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
-o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
}
.n_banner_inner .img-info .info a {
color: #fff;
}
.n_banner_inner .tirr {
max-width: 100%;
height: auto;
transition: 0.5s;
border-radius: 5px;
}
/*触发 Hover*/
.n_banner_inner:hover .info {
width: auto;
padding: 5px 23px 5px 12px;
-webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
-moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
-ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
-o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
font-size: 12px;
z-index: 1;
}
.n_banner_inner img:hover {
filter: brightness(50%);
}
/*出发声明 hover*/
.n_banner_inner .info:hover a {
color: red;
text-decoration: none;
}
/*左下角广告*/
.n_banner_inner .Banner-adTag {
position: absolute;
left: 5px;
bottom: 5px;
width: 50px;
border: 1px solid #ebebeb;
border-radius: 3px;
color: #ebebeb;
opacity: 0.5;
font-size: 12px;
line-height: 20px;
text-align: center;
}
@media screen and (max-width: 768px) {
.n_banner_inner .img-info {
display: none;
}
}
.container {
width: 100%;
}
.zib-widget {
clear: both;
background: #fff0;
padding: 0px;
box-shadow: 0 0 0px var(--main-shadow);
border-radius: var(--main-radius);
margin-bottom: 20px;
}
</style>
备注:
此代码来自子比主题官方社区,作者:李初一。
由于原图已丢失,搜集网随便用一张元旦快乐的图片代替,请自行替换图片。
© 版权声明
点点赞赏,手留余香~
还没有人给TA充电
给TA充电
声明
花猪使用须知
- 1本网站内容仅供个人学习、研究和欣赏,未经授权禁止用于任何商业用途。
- 2网站中的代码示例仅用于教育目的,使用时请遵循相关开源协议和授权规定。
- 3转载或引用本站内容请注明出处,尊重原创,共同维护良好的创作环境。
- 4网站评论区欢迎理性讨论,请勿发表违反法律法规的言论,共建和谐社区。
- 5如有内容侵犯您的权益,请通过博客联系方式告知,将立即核实并处理。
- 6使用本站资源时产生的任何问题与后果需自行承担,请谨慎操作。
THE END
喜欢就支持一下吧
相关推荐













暂无评论内容