去评论
dz插件网

文心一言生成的2横大图2横4小图广告代码 来个大佬看看有没有需要修改的地方

逝水年华
2024/05/01 17:26:55
演示图电脑端  手机端还没测试

下面是html代码：
  1. <!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  class="ad-link">                            <span class="ad-label">广告</span>          </a>      </div>      <div class="large-ad">          <a  class="ad-link">                            <span class="ad-label">广告</span>          </a>      </div>        <!-- 两排四个小图 -->      <div class="small-ads">          <div class="small-ad-row">              <div class="small-ad">                  <a  class="ad-link">                                            <span class="ad-label">广告</span>                  </a>              </div>              <div class="small-ad">                  <a  class="ad-link">                                            <span class="ad-label">广告</span>                  </a>              </div>          </div>          <div class="small-ad-row">              <div class="small-ad">                  <a  class="ad-link">                                            <span class="ad-label">广告</span>                  </a>              </div>              <div class="small-ad">                  <a  class="ad-link">                                            <span class="ad-label">广告</span>                  </a>              </div>          </div>      </div>  </div>    </body>  </html>
下面是css：
  1. <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>
进入原文参与互动