子比主题 – 随机背景文字三栏组合广告位
这是一款子比主题随机背景文字三栏组合广告位，效果非常好看，左边两张图片，右边是随机背景文字的一个广告位的代码，有技术的自己适配一下手机端，我手机端给隐藏了，喜欢的自行部署吧！代码部署
直接将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML代码即可
<div class="ercdh">
<div class="ercdh_1 ">
<div class="sbaner">
<a href="https://www.tfbkw.com/" target="_blank">
</a>
</div>
<div class="sbaner">
<a href="https://www.tfbkw.com/" target="_blank">
</a>
</div>
</div>
<div class="ercdh_2">
<!-- 待写标签统计 -->
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://www.tfbkw.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;
}
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]