用html写一个3行6列的文字广告要求有关闭按钮右下角有广告标识
以下是使用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。
原文地址: https://www.cveoy.top/t/topic/Cf4 著作权归作者所有。请勿转载和采集!