html+css制作div标签增加右上角删除图标的示例代码

一、需求描述 在Div标签的右上角显示删除图标 二、实现方式 html、CSS 三、参考代码 &lt;style&gt; .container{ width:60px; height:60px; border: 1px dotted red; position:relative; } .content{ position:relative; top:20px; } .delete{ width:20px; height:20px; border-radius:6 标题中的“html+css制作div标签增加右上角删除图标的示例代码”是指通过HTML和CSS技术，在一个Div元素的右上角添加一个可点击的删除图标。这个功能常见于网页设计中，用于创建具有交互性的用户界面，例如删除按钮或者关闭提示框。 在描述中，提到了需求是“在Div标签的右上角显示删除图标”，并且指出了实现方法为HTML和CSS。这里，我们需要创建一个包含删除图标的Div容器，并将其定位在父Div的右上角。 实现这一功能的关键CSS代码如下： ```css .container { width: 60px; height: 60px; border: 1px dotted red; position: relative; } .delete { width: 20px; height: 20px; border-radius: 60%; position: absolute; top: -10px; right: -10px; } ``` 这段代码首先定义了一个名为`.container`的Div，设置了宽度、高度和边框，并通过`position: relative;`使其成为一个相对定位的容器。接着，定义了一个`.delete`类，用于表示删除图标，设置图标大小、圆角以及绝对定位，使其出现在容器的右上角。`top: -10px;`和`right: -10px;`将图标向内偏移，使其刚好位于容器的边界内。 此外，代码还包含了`<img>`标签来插入删除图标的图片，并添加了`onclick`事件，使得当用户点击图标时，会弹出警告框（示例中仅为`alert(1)`，实际应用中应替换为实际的删除操作）。 在附录部分，提到了如何在输入框左边添加一个小图标。这同样使用CSS实现，代码如下： ```css .text { border: solid 2px #ccc; width: 400px; height: 40px; background: url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center; } .text input { float: left; border: none; background: none; height: 40px; line-height: 30px; width: 100%; text-indent: 32px; } ``` 这部分CSS将背景图片设置为输入框的左侧，通过`no-repeat`和`0 center`控制图片只显示一次并居中。输入框内的文字通过`text-indent`属性向右偏移，使得文字不与图标重叠。 总结：本文介绍了如何使用HTML和CSS在Div标签的右上角添加一个可点击的删除图标，以及如何在输入框左边添加小图标。这两个示例展示了CSS在网页布局和美化中的重要作用，以及如何通过CSS实现元素的定位和交互效果。对于前端开发者来说，理解和掌握这些技巧是构建美观且具有功能性的网页界面的基础。