一、需求描述

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

二、实现方式

html、CSS

三、参考代码

.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;

}

content

content

附录:在输入框左边加一个小图标,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;}

总结

到此这篇关于html+css制作div标签增加右上角删除图标的示例代码的文章就介绍到这了,更多相关div 右上角删除图标内容请搜索米云问答以前的文章或继续浏览下面的相关文章,希望大家以后多多支持米云问答!

html 右上角删除图标,网页制作html+css制作div标签增加右上角删除图标的示例代码...相关推荐

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

    一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 .container{ width:60px; height:60px; border: 1px dott ...

  2. div标签增加右上角删除图标

    一.需求描述 在Div标签的右上角显示删除图标 二.实现方式 html.CSS 三.参考代码 <style> .container{ width:60px; height:60px; bo ...

  3. Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的?

    Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...

  4. html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法

    本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...

  5. html hover 效果,CSS八种让人眼前一亮的HOVER效果的示例代码

    一.发送效果HTML // 这里是一个svg的占位 Send CSS #send-btn{ display: flex; align-items: center; justify-content: c ...

  6. html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码

    代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...

  7. 静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...

    本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端 移动端 代码 左侧导航 *{ margin:0; padding:0; } #header ...

  8. html css做网页总结,学习CSS制作网页总结的一些经验

    学习CSS制作网页总结的一些经验 互联网   发布时间:2008-10-17 19:28:20   作者:佚名   我要评论 让你使用DIV CSS排版 不是让你用换个标签然后再去按照表格的方式去排版 ...

  9. Java Web--HTML、CSS、JavaScript详细学习笔记(内含丰富示例代码)

    ** Java Web–HTML.CSS.JavaScript学习笔记 ** HTML(Hyper Text Markup Language超文本标记语言):控制的是页面的内容,是由标签组成的语言,能 ...

最新文章

  1. Python源码学习:多线程实现机制
  2. sql增删改查_增删改查!sql2pandas方法手册
  3. php文章付费阅读系统球料付费阅读系统
  4. 无参数的构造函数如何声明对象?
  5. 预处理_气体在线分析仪预处理系统的工作内容
  6. python代码质量检查工具_python代码检查工具pylint 让你的python更规范
  7. linux7.3怎么修改时区,CentOS7校准核对服务器时区和手动修改时间
  8. docker学习笔记(二)创建自己的镜像
  9. web通讯录之登录注册界面
  10. 读《人月神话》有感2
  11. 入侵网站简单方法总结
  12. 七、MySql-锁与事物
  13. 微机计算机原理及应用ppt,微型计算机原理及应用PPT课件
  14. 【Hoxton.SR1版本】Spring Cloud Eureka服务注册中心集群搭建
  15. 多层线性模型和面板数据模型笔记(待完善,持续更)
  16. C#开启和关闭UAC功能
  17. 判断文章内容重复率的算法实现
  18. 华为鸿蒙系统什么架构,你知道华为鸿蒙到底是什么吗?
  19. Packets larger than max_allowed_packet are not allowed
  20. Python编程100例--身份证号码的校验码

热门文章

  1. linux uvc stm32,linux uvc深入理解(三)
  2. 计算机网络学习笔记:OSI/RM体系结构
  3. 安卓学习笔记20:Fragment入门
  4. 计算机硬件性能关联性,计算机硬件系统组成课堂教学有效研究结题报告.ppt
  5. Handler源码解析2
  6. php 同时导出两个文件_使用orangehill/iseed自动反向生成数据填充文件
  7. python库的安装方法_Python库的安装方法
  8. linux32位运行64位程序,32位windows下可以运行的程序在64位linux下报错
  9. Unreal Engine 4 基于网格的水面模拟实现
  10. iPad Air 2完全评测:可怕的三核CPU、六核GPU