幽灵资源网 Design By www.bzswh.com
一、需求描述
在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>
总结
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...