预览如图，手机端为自适应两行展示 使用方式：代码粘贴至合适的位置即可！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横板自适应双广告图片</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #333;
}
.ad-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.ad {
position: relative;
width: calc(50% - 10px);
min-width: 300px;
overflow: hidden;
}
.ad img {
width: 100%;
height: auto;
display: block;
}
.ad-label {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px 10px;
border-radius: 3px;
font-size: 12px;
}
@media (max-width: 768px) {
.ad {
width: 100%;
}
}
</style>
</head>
<body>
<div class="ad-container">
<div class="ad">
<img src="gg.png" alt="广告1">
<div class="ad-label">广告</div>
</div>
<div class="ad">
<img src="gg.png" alt="广告2">
<div class="ad-label">广告</div>
</div>
</div>本站资源仅供学习交流使用请勿商业运营,严禁使用模板&源码从事违法,侵权等非法活动！如链接失效内容有误，请到评论反馈。
免费声明
- 本网站的文章内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ:304906607进行删除处理。
- 文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)。
- 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
- 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
- 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
- 本站永久网址：https://www.aybk.cn
二次元聚合短视频解析去水印系统源码
« 上一篇
03-17
安卓Pixiv P站客户端 v6.137.0 去广告纯净版
下一篇 »
03-15
发表评论
请先登录后才能发表评论