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

🤖 由 星火认知大模型 生成的文章摘要
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
分享一个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>
文章作者:阿库
文章链接:https://akau.cn/8077.html
温馨提示:本文最后更新于2024-05-13 ,如有错误或者已经失效,请留言告知。
版权声明:本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明来自:阿库笔记

给TA打赏
共{{data.count}}人
人已打赏
源码分享

推荐一款工具网源码,百度全站收录

2024-5-13 15:15:45

源码分享

WordPress插件:文章ID连续无空ID,让文章管理更高效

2024-5-22 20:06:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索