分享一个2图片+10文字的混合广告位附源码

效果图

使用html+css+js制作的2图片+10文字组合的混合广告位，鼠标移动到文字广告时出现随机背景色，但是移动端未做适配。

<div class="ercdh">
<div class="ercdh_1 "> <!-- 待写幻灯片 -->
<div class="sbaner">
<a href="https://tool.akau.cn/" target="_blank">
<img class="b2-radius" src="https://icdn.akau.cn/2024/05/13/ud43m4.webp
" alt="">
</a>
</div>
<div class="sbaner">
<a href="#" target="_blank">
<img class="b2-radius" src="https://akau.cn/wp-content/uploads/2024/05/db53093f0cfb780209468b3a9a65bbd9.webp" alt="">
</a>
</div>
</div>
<div class="ercdh_2"> <!-- 待写标签统计 -->
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
<section class="bqct mhs-flex-container">
<a href="/" class="random-color">测试</a>
</section>
</div>
</div>
<style>

.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: 1px solid #f1f2f3;
border-radius: 6px;
background-color: #fff;
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;
}
</style>
<script>
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 = '';
});
});
});
</script>