文章最后更新时间:2025-05-27 23:21:33
这是一款子比主题双栏随机背景文字的广告位样式代码,这个代码没有适配手机端,把手机端隐藏了,如果有技术的可以自己适配一下,电脑端基本上没有问题,喜欢的自行部署!
![图片[1] - 子比主题 – 双栏随机背景文字广告位](https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01Zkb1jk1QbIoZ9IyFb_!!2210123621994.gif)
代码部署
将下面的代码放到:WP后台–>>外观–>>小工具–>>自定义HTML即可,自己想放哪里就放哪里!
<div class="ercdh">
<div class="ercdh_1 ">
<div class="sbaner">
<a href="https://tfbkw.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://tfbkw.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://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://tfbkw.com/" class="random-color">腾飞博客</a>
</section>
<section class="bqct mhs-flex-container">
<a href="https://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[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 = '';
});
});
});
THE END
- 最新
- 最热
只看作者