html+css制作div标签增加右上角删除图标的示例代码_css右上角角标,div右上角添加删除按钮 - CSDN文库

148 浏览量更新于2023-03-16 评论 1 收藏 29KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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" ο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>

总结总结

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38616330

粉丝: 4
资源: 950

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈