天道酬勤图片广告HTML：
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="网站地址" class="ad-link">
<img src="图片地址" alt="大图广告1" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<div class="large-ad">
<a href="网站地址" class="ad-link">
<img src="图片地址" 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="网站地址" class="ad-link">
<img src="图片地址" alt="小图广告1" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<div class="small-ad">
<a href="网站地址" class="ad-link">
<img src="图片地址" alt="小图广告2" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
</div>
<div class="small-ad-row">
<div class="small-ad">
<a href="网站地址" class="ad-link">
<img src="图片地址" alt="小图广告3" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
<div class="small-ad">
<a href="网站地址" class="ad-link">
<img src="图片地址" alt="小图广告4" class="ad-img">
<span class="ad-label">广告</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
代码解释：
HTML 部分：
<html lang="en">：声明文档的语言为英语。
<head> 部分：
<meta charset="UTF-8">：指定字符编码为 UTF-8，确保页面可以正确显示各种字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口的属性，使页面在不同设备上有良好的显示效果，width=device-width 表示视口宽度等于设备宽度，initial-scale=1.0 表示初始缩放比例为 1。
<title>：设置页面的标题为 "图片广告示例"。
<style>：包含页面的 CSS 样式。
<body> 部分：
.ad-container：包含所有广告的容器，使用 flex 布局，按列排列。
.large-ad：表示大图广告的容器，包含一个链接元素 ad-link 和图片元素 ad-img 以及广告标签 ad-label。
.small-ads：包含小图广告的容器，使用 flex-wrap: wrap 实现换行。
.small-ad-row：表示小图广告的行容器，在手机端使用 flex-direction: column 排列，在电脑端使用 flex-direction: row 排列。
.small-ad：表示单个小图广告的容器，在手机端占满一行，在电脑端占一半宽度。
.ad-link：包含广告图片和标签的链接元素。
.ad-img：广告图片元素，使用 width: 100% 和 height: auto 确保图片自适应容器大小。
.ad-label：广告标签元素，使用绝对定位，显示在图片的右下角，有半透明背景，增加了背景颜色和内边距，使标签更易读。CSS代码（放入上面HTML代码<style>
/* 这里将包含CSS样式，请将其放在<style>标签内 */
</style> ：
<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>
CSS 部分：
.ad-container：
display: flex; flex-direction: column;：使用 flex 布局并按列排列内部元素。
box-sizing: border-box;：使元素的宽度包含边框和内边距，避免元素超出容器。
.large-ad 和 .small-ad：
margin-bottom: 10px;：设置元素之间的垂直间距。
.ad-link：设置为块级元素，并使用相对定位，为广告标签的绝对定位做准备。
.ad-img：确保图片的宽度为 100%，高度自适应。
.ad-label：使用绝对定位，设置位置、颜色、背景、内边距、圆角和字体大小，以显示广告标签。
.small-ads：
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;：使用 flex 布局和 wrap 实现换行，使用 gap 控制元素间距。
.small-ad-row：
flex-direction：在手机端为 column，在电脑端为 row，以实现不同设备的布局调整。
.small-ad：在手机端 flex: 0 0 100%; 占满一行，在电脑端 flex: 0 0 calc(50% - 5px); 占一半宽度并考虑间距。
使用说明：
将上述代码保存为一个 .html 文件，然后在浏览器中打开。
替换 href 属性中的 "网站地址" 为实际的广告链接。
替换 src 属性中的 "图片地址" 为实际的图片路径。
你可以根据需要调整 CSS 中的间距、字体大小、颜色等样式，以达到更满意的显示效果。
通过上述代码，你可以在电脑端实现大图正常显示，小图分两排显示；在手机端实现大图正常显示，小图分两列显示，且保证图片间距一致，同时有良好的布局和显示效果。
以下是修改后的 CSS 代码，可满足电脑端显示不变，手机端不溢出窗口且同列的图片分列显示的需求：：
<style>
.ad-container {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 5px; /* 顶部间距 */
box-sizing: border-box; /* 确保元素的宽度包含边框和内边距 */
}
.large-ad {
margin-bottom: 2px; /* 大图之间的间距 */
}
.large-ad img,
.small-ad img {
width: 100%;
height: auto;
display: block;
}
.small-ads {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 统一的图片间距，可根据需要调整 */
}
.small-ad-row {
width: 100%;
display: flex;
flex-direction: column; /* 手机端小图行的排列方式改为列排列 */
margin-bottom: 20px; /* 小图行之间的间距，可根据需要调整 */
}
.small-ad {
flex: 0 0 100%; /* 小图占满一行的宽度 */
margin-bottom:-13px; /* 小图之间的间距，可根据需要调整 -13px , 图片间距 */
}
/* 媒体查询，针对电脑端进行调整 */
@media screen and (min-width: 768px) {
.small-ad-row {
flex-direction: row; /* 电脑端小图行的排列方式为行排列 */
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>
代码解释：
.ad-container：
box-sizing: border-box;：确保元素的宽度包含边框和内边距，避免元素因边框和内边距超出容器宽度。
.small-ads：
gap: 10px;：设置一个统一的图片间距，这个间距会应用于电脑端和手机端，你可以根据需要调整其大小。
.small-ad-row：
flex-direction: column;：在手机端将小图行的排列方式改为列排列，使同列图片分列显示。
margin-bottom: 10px;：设置手机端小图行之间的间距，可根据需要调整。
媒体查询 @media screen and (min-width: 768px)：
对于电脑端（屏幕宽度大于等于 768px）：
small-ad-row：将 flex-direction 改为 row，使小图行的排列方式为行排列。
margin-bottom: 2px;：设置电脑端小图行之间的间距，可根据需要调整。
small-ad：将 flex 属性设置为 0 0 calc(50% – 1px); 确定电脑端小图的宽度，可根据需要调整。
margin-bottom: 2px;：设置电脑端小图之间的间距，可根据需要调整。
使用说明：
- 将上述代码添加到你的 HTML 文件的
<style>标签内，或者将其保存在一个单独的.css文件中，并通过<link>标签引入到你的 HTML 文件中。 - 在电脑端，布局和元素样式将保持原有的显示效果，通过
media query调整小图的排列方式和间距。 - 在手机端，通过修改
small-ad-row的flex-direction属性将同列图片分列显示，同时使用统一的gap和margin-bottom来设置图片间距。
这样可以确保电脑端的显示基本不变，同时在手机端实现同列图片分列显示，并且图片间距与电脑端保持一致（通过 gap 和 margin-bottom 控制）。你可以根据实际情况对代码中的像素值和间距进行微调，以达到最满意的显示效果。