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

主机推荐网 403 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() 选择器,我们可以为每个广告块指定不同的样式。你可以根据需要修改颜色和样式。

最终效果如下图:

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

所属专题: 广告代码 代码实例 HTML代码 建站教程

发布评论 1条评论)

  • Refresh code

评论列表

2023-10-05 21:58:29

挺有用的!