(编辑:jimmy 日期: 2024/10/30 浏览:2)
一、需求描述
在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" ο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(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;} </style> </head> <body> <div class="text"> <input type="text"/> </div> </body> </html>
总结