前言：
今天全网找广告代码，找了好久都没有满意的，然后摸索着写了一个，图片广告代码，图片右下角有“广告”字样，广告里面大体位置都有汉字标识，就算不懂代码也可以很轻易上手，喜欢的来看看吧，目前只做了电脑端，手机端可能还需要部分调整。
电脑端截图：
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片广告示例</title>
<style>
/* 这里将包含CSS样式，请将其放在<style>标签内 */
</style>
</head>
<body>
<div class="ad-container">
<!-- 两个横大图 -->
<div class="large-ad">
<a href="https://www.xxx.com/fyxm/33.html" class="ad-link">
<img src="https://www.xxx.com/ad/dgg.jpg" alt="大图广告1" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<div class="large-ad">
<a href="https://www.xxx.com/ad.html" class="ad-link">
<img src="https://www.xxx.com/ad/2400x140.png" alt="大图广告2" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<!-- 两排四个小图 -->
<div class="small-ads">
<div class="small-ad-row">
<div class="small-ad">
<a href="https://www.xxx.com/fyxm/33.html" class="ad-link">
<img src="https://www.xxx.com/ad/shoujizq468x60.jpg" alt="小图广告1" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<div class="small-ad">
<a href="https://www.xxx.com/fyxm/3.html" class="ad-link">
<img src="https://www.xxx.com/ad/shoujizq468x60.jpg" alt="小图广告2" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
</div>
<div class="small-ad-row">
<div class="small-ad">
<a href="https://www.xxx.com/fyxm/33.html" class="ad-link">
<img src="https://www.xxx.com/ad/188G.png" alt="小图广告3" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<div class="small-ad">
<a href="https://www.xxx.com/fyxm/33.html" class="ad-link">
<img src="https://www.xxx.com/ad/xllk.png" alt="小图广告4" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
注意如果只用其中一个，记得加</div>，也可把里面的广告二字换成图片例子：
<div class="large-ad">
<a href="https://www.xxx.com/ad.html" class="ad-link">
<img src="https://static.mycj.cc/upload/images/051-jipinzy3.gif" alt="大图广告2" class="ad-img">
<span class="ad-label"><img src="https://dd-static.jd.com/ddimg/jfs/t1/190744/18/22104/195/6239d04bEd4ce7637/d697e8fda7bf0daa.png" class="ad-img"> </span>
</a>
</div>
CSS：（放到主题的自定义功能里，没有的就放到主题的主CSS里）
<style>
.ad-container {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 5px; /* 顶部间距 */
}
.large-ad {
margin-bottom: 2px; /* 大图之间的间距 */
}
.large-ad img, .small-ad img {
width: 100%;
height: auto;
display: block;
}
.small-ads {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.small-ad-row {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 2px; /* 小图行之间的间距 */
}
.small-ad {
flex: 0 0 calc(50% - 1px); /* 减去间距的一半 */
margin-bottom: 2px; /* 小图之间的间距 */
}
.ad-link {
position: relative;
display: block;
overflow: hidden; /* 确保广告标签不会溢出图片 */
}
.ad-label {
position: absolute;
right: -4px;
bottom: 5px;
color: white; /* 文字颜色为白色 */
padding: 2px 5px; /* 内边距调整 */
border-radius: 3px; /* 圆角 */
font-size: 9px; /* 字体大小 */
}
</style>
