以下是使用HTML代码编写的3行6列的文字广告:

<div style="width: 400px; height: 200px; background-color: #f5f5f5; position: relative;">
  <div style="position: absolute; top: 5px; right: 5px;">
    <button style="background-color: #f5f5f5; border: none; font-size: 16px; cursor: pointer;">X</button>
  </div>
  <div style="padding: 20px;">
    <h3>精选商品推荐</h3>
    <p>1. 美味薯片</p>
    <p>2. 香脆饼干</p>
    <p>3. 纯棉T恤</p>
    <p>4. 舒适沙发</p>
    <p>5. 时尚手表</p>
    <p>6. 轻便运动鞋</p>
  </div>
  <div style="position: absolute; bottom: 5px; right: 5px;">
    <span style="font-size: 12px; color: #999;">Advertisement</span>
  </div>
</div>

解释:

  • 使用<div>标签创建一个容器,设置宽度为400px,高度为200px,背景颜色为#f5f5f5,定位为相对位置(默认为static)。
  • 在该容器内部添加另外两个<div>标签,分别用于放置关闭按钮和文字广告内容。
  • 关闭按钮的容器使用绝对定位(相对于父容器),位置设置为距离顶部和右侧均为5px,并使用<button>标签创建一个按钮,设置背景颜色为#f5f5f5,无边框,字体大小为16px,鼠标样式为手型。
  • 文字广告内容的容器使用相对定位(相对于父容器),内部使用<h3><p>标签创建标题和内容。
  • 在文字广告容器的底部右侧,使用绝对定位(相对于父容器)的方式放置广告标识,使用<span>标签创建一个文本块,设置字体大小为12px,颜色为#999。
用html写一个3行6列的文字广告要求有关闭按钮右下角有广告标识

原文地址: https://www.cveoy.top/t/topic/Cf4 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录