给网站加一行动态【优质图片广告位】代码丨超级好看~
本帖最后由 笑点 于 2024-8-29 11:42 编辑此代码自适应网站布局，具有点击动态展示、跳转链接、左标动态、自适应尺寸等。{:5_125:}
可直接复制代码添加到后台即可显示{:5_118:}
目前测试没有任何问题，如有不与网站相匹配的情况，请自行修改代码。{:5_127:}
演示站：https://wdhzl.douk.shop 【滑动到网站底部查看】
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图片广告位示例</title>
<style>
.ad-container {
display: flex;
justify-content: space-between;
margin: 10px 0;
gap: 10px; /* 间距 */
}
.ad-item {
position: relative;
flex: 1;
max-width: calc(20% - 10px); /* 每个广告项占总宽度的1/5减去间距 */
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.ad-item:hover {
transform: scale(1.1); /* 鼠标悬停时放大 */
}
.ad-item img {
width: 100%; /* 图片填充整个容器 */
height: auto;
object-fit: cover; /* 图片填充整个容器，保持原始宽高比 */
}
.label {
position: absolute;
top: 5px;
left: 5px;
font-size: 14px;
color: white;
background-color: rgba(0, 0, 0, 0.6);
padding: 2px 5px;
border-radius: 3px;
animation: fadeInOut 1s infinite;
}
/* 动画 */
@keyframes fadeInOut {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@media (max-width: 768px) {
.ad-container {
display: none; /* 在手机端隐藏 */
}
}
</style>
</head>
<body>
<div class="ad-container">
<div class="ad-item" onclick="window.location.href='https://wdhzl.douk.shop/';">
<img src="https://p1.meituan.net/csc/aceb9593d73880940e1058a773bfd38312641.gif" alt="Image 1">
<span class="label">优质</span>
</div>
<div class="ad-item" onclick="window.location.href='https://wdhzl.douk.shop/';">
<img src="https://p1.meituan.net/csc/aceb9593d73880940e1058a773bfd38312641.gif" alt="Image 2">
<span class="label">优质</span>
</div>
<div class="ad-item" onclick="window.location.href='https://wdhzl.douk.shop/';">
<img src="https://p1.meituan.net/csc/aceb9593d73880940e1058a773bfd38312641.gif" alt="Image 3">
<span class="label">优质</span>
</div>
<div class="ad-item" onclick="window.location.href='http://v6v7.cn/';">
<img src="https://p1.meituan.net/csc/aceb9593d73880940e1058a773bfd38312641.gif" alt="Image 4">
<span class="label">优质</span>
</div>
<div class="ad-item" onclick="window.location.href='http://v6v7.cn/';">
<img src="https://p1.meituan.net/csc/aceb9593d73880940e1058a773bfd38312641.gif" alt="Image 5">
<span class="label">优质</span>
</div>
</div>
</body>
</html>
❤️ 每一天都是一个新的机会。 ❤️—— 来自：荷包蛋部落（HBD0.CN）已读乱回 不错不错{:12_673:} 不能用
页:
[1]