子比主题美化 – 添加创意横幅图片广告位星恬33天前更新关注私信0636 共计6221字,阅读大约21分钟。 我更新的动力 - 源自您的关注。 ------正文内容展示,开始汲取新知识啦------ 温馨提示:本文最后更新于2024-04-16 23:21:58,某些文章具有时效性,若有错误或已失效,请在下方留言。前言 这个横幅广告代码不错,可以点击直达开通会员页面,鼠标放到横幅上可以显示右上角联系我们,感觉还是比较实用的一个广告横幅代码 效果图 部署:子比后台 >> 自定义 >> 顶部全区块 >> 自定义HTML,CSS代码放到自定义CSS即可 HTML代码 <div class="n_banner_inner"> <div class="img-info">! <div class="info">也想出现在这里? <a rel="nofollow noopener noreferrer" href="https://xingtian.fun/" target="_blank">联系我们</a>吧</div> </div> <a href="https://xingtian.fun/user" target="_blank" rel="noopener noreferrer"> <div class="Banner-adTag">广告</div> <img class="tirr" src="https://xingtian.fun/pic/vipbgbg.webp" 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; } .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: var(--main-bg-color); padding: 0px; box-shadow: 0 0 0px var(--main-shadow); border-radius: var(--main-radius); margin-bottom: 20px; } </style> CSS代码 此处内容已隐藏,请评论后刷新页面查看. ------本文内容已结束,喜欢请分享------ 感谢您的访问,Ctrl+D收藏本站吧。 五月 20 恬集社的今时往日 吼吼~~~,往年的今天博主不知道跑哪里偷懒去了~~~ © 版权声明 1 如果您喜欢本站, 点击这儿 赞助下本站,感谢支持! 2 可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看 | 广告合作 ; 3 本站内容观点不代表本站立场,并不代表本站赞同其观点和对其真实性负责; 4 本站所有内容均来源于网络,仅供学习与参考,请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负; 5 若作商业用途,请联系原作者授权,若本站侵犯了您的权益请 联系站长 进行删除处理; 6 如若转载,请注明文章出处: THE END子比主题教程之家# 广告# 创意 喜欢就支持一下吧点赞6赞赏收藏 分享QQ空间微博QQ好友海报分享复制链接打赏