html+css如何制作div标签增加右上角删除图标

2023-06-08 04:06:14 261人浏览泡泡鱼

摘要

这篇文章主要介绍html+CSS如何制作div标签增加右上角删除图标，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、需求描述在Div标签的右上角显示删除图标二、实现方式html、CSS三、参考代码<style

这篇文章主要介绍html+CSS如何制作div标签增加右上角删除图标，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一、需求描述

在Div标签的右上角显示删除图标

二、实现方式

html、CSS

三、参考代码

<style>.container{        width:60px;        height:60px;        border: 1px dotted red;        position:relative;}.content{        position:relative;        top:20px;}.delete{        width:20px;        height:20px;        border-radius:60%;        position:absolute;        top:-10px;        right:-10px;}</style><div class="container">        <img src="Http://www.iconpng.com/download/png/61252" class="delete" &omicron;nclick="alert(1)"/>        <div class="content">content</div></div><div class="container">        <img src="http://www.iconpng.com/download/png/61252" class="delete"/>        <div class="content">content</div></div>

附录：在输入框左边加一个小图标，css样式应该怎么写？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.text{border:solid 2px #ccc;width:400px;height:40px;background:url(https://file.lsjlt.com/upload/202306/07/e3nxwrttwuf.jpg) no-repeat 0 center;}.text input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;} </style></head> <body><div class="text">    <input type="text"/></div></body></html>

以上是“html+css如何制作div标签增加右上角删除图标”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网精选频道！

--结束END--

本文标题: html+css如何制作div标签增加右上角删除图标

本文链接: https://lsjlt.com/news/251615.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341