子比主题 – 双栏随机背景文字广告位kobai2个月前更新关注私信0950 这是一款子比主题双栏随机背景文字的广告位样式代码,这个代码没有适配手机端,把手机端隐藏了,如果有技术的可以自己适配一下,电脑端基本上没有问题,喜欢的自行部署! 代码部署 HTMLCSSjs 将下面的代码放到:WP后台–>>外观–>>小工具–>>自定义HTML即可,自己想放哪里就放哪里! <div class="ercdh"> <div class="ercdh_1 "> <div class="sbaner"> <a href="https://www.xkzhi.com/" target="_blank"> <img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" style="width:330px; height:100%;"> </a> </div> <div class="sbaner"> <a href="https://www.xkzhi.com/" target="_blank"> <img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" style="width:330px; height:100%;"> </a> </div> </div> <div class="ercdh_2"> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> <section class="bqct mhs-flex-container"> <a href="https://www.xkzhi.com/" class="random-color">星空知</a> </section> </div> </div> 直接将下面的代码放到:子比主题–>>自定义CSS样式即可! .ercdh { display: flex; overflow: hidden; } .ercdh_1 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-right: 30px; position: relative; width: 50%; } .sbaner { height: 80px; } .ercdh_2 { flex: 1; padding-left: 30px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 15px; } .mhs-flex-container { display: flex; justify-content: flex-start; align-items: center; align-self: auto; } .random-color { transition: background-color 0.5s; color: #ececec; } .bqct { font-size: 14px; display: flex; } .bqct a { width: 100%; border-radius: 6px; background-color: var(--main-bg-color); text-align: center; font-weight: 400; transition: background-color .3s, color .3s; line-height: 30px; color: #707070; text-decoration: none; } .bqct a:hover { color: #f1f2f3; } .sbaner:after { content: ""; display: inline-block; background: #ececec; position: absolute; width: 1px; height: 44px; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .html-box img { height: 80px; } @media screen and (max-width: 1221px) { .ercdh{display:none; } } 直接将下面的代码放到:子比主题–>>自定义javascript代码即可! function getRandomColor() { const letters = '0123456789ABCDEF'; let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } document.addEventListener('DOMContentLoaded', () => { const sections = document.querySelectorAll('.random-color'); sections.forEach(section => { section.addEventListener('mouseover', () => { section.style.backgroundColor = getRandomColor(); }); section.addEventListener('mouseout', () => { section.style.backgroundColor = ''; }); }); }); © 版权声明 版权声明 1 本网站名称:星空知 2 本站永久网址:https://www.xkzhi.com/ 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ1397403557进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报 6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 THE END子比教程技术教程子比美化技术教程# WP# Html# 子比# 美化 喜欢就支持一下吧点赞0 分享QQ空间微博QQ好友海报分享复制链接收藏