自适应的文字广告代码分享，真实效果是3行6列并增加不同色彩背景

主机推荐网 2023-09-29 21:33:06 436 1

<!DOCTYPE html>
<html>
<head>
  <title>自适应文字广告</title>
  <style>
    .ad-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px;
    }

    .ad {
      background-color: #f2f2f2;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="ad-container">
    <div class="ad">广告1</div>
    <div class="ad">广告2</div>
    <div class="ad">广告3</div>
    <div class="ad">广告4</div>
    <div class="ad">广告5</div>
    <div class="ad">广告6</div>
  </div>
</body>
</html>

这段代码使用了CSS的Grid布局，通过grid-template-columns属性设置自适应的列数，其中repeat(auto-fit, minmax(200px, 1fr))表示每列的最小宽度为200px，如果容器宽度允许，会自动适应更多的列。grid-gap属性用于设置列之间的间距。

在HTML部分，我们使用div元素来创建广告容器，并在其中放置了6个广告块。你可以根据需要修改广告内容和样式。

拓展：给每一格增加不同色彩背景，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>自适应文字广告</title>
  <style>
    .ad-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px;
    }

    .ad {
      padding: 10px;
      text-align: center;
    }

    .ad:nth-child(1) {
      background-color: #ffcccc;
    }

    .ad:nth-child(2) {
      background-color: #ccffcc;
    }

    .ad:nth-child(3) {
      background-color: #ccccff;
    }

    .ad:nth-child(4) {
      background-color: #ffffcc;
    }

    .ad:nth-child(5) {
      background-color: #ffccff;
    }

    .ad:nth-child(6) {
      background-color: #ccffff;
    }
  </style>
</head>
<body>
  <div class="ad-container">
    <div class="ad">广告1</div>
    <div class="ad">广告2</div>
    <div class="ad">广告3</div>
    <div class="ad">广告4</div>
    <div class="ad">广告5</div>
    <div class="ad">广告6</div>
  </div>
</body>
</html>

在这个修改后的代码中，我为每个广告块添加了不同的背景颜色。通过使用 :nth-child() 选择器，我们可以为每个广告块指定不同的样式。你可以根据需要修改颜色和样式。

最终效果如下图：