https://segmentfault.com/q/1010000006551803?_ea=1074082

<html>
<style>
#a1 {
width: 200px;
height: 200px;
background-color: #333;
color: #fff;
position: relative;
margin-top: 50px;
}

#a1:after {
content: attr(data-num);
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
top: -20px;
right: -20px;
}
</style>
<body>

<div data-num='22' id="a1">33333</div>

</body>
</html>

html如何给图片加角标的更多相关文章

  1. iOS nav加角标

    写一个类别加上就可以啦 #import "UIBarButtonItem+Badge.h" #import "BadgeView.h" #import < ...

  2. iOS 未读消息角标 仿QQ拖拽 简单灵活 支持xib(源码)

    一.效果 二.简单用法 超级简单,2行代码集成:xib可0代码集成,只需拖一个view关联LFBadge类即可 //一般view上加角标 _badge1 = [[LFBadge alloc] init ...

  3. Android 为应用添加数字角标

    今天在论坛上看到了一个帖子,终于搞清了我很久以来的一个困惑,android到底能不能实现ios的角标效果,QQ是怎么实现的.看了这个帖子顿时终于解除了我的困惑. 先说一个下大概的思路: 大家都知道an ...

  4. Android之图片加载框架Fresco基本使用(二)

    PS:最近看到很多人都开始写年终总结了,时间过得飞快,又到年底了,又老了一岁. 学习内容: 1.进度条 2.缩放 3.ControllerBuilder,ControllerListener,Post ...

  5. 从代码分析Android-Universal-Image-Loader的图片加载、显示流程

    从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中 ...

  6. Android Fresco (Facebook开源的图片加载管理库)

    Fresco是Facebook开源的一个图片加载和管理库. 这里是Fresco的GitHub网址. 同类型的开源库市面有非常多,比如Picasso, Universal Image Loader, G ...

  7. 通知角标(2)只用一个TextView实现

    可以只用一个TextView实现通知角标,TextView的setCompoundDrawables函数可以在TextView的上,下,左,右,4条边处分别指定一个图片.见图1: 这个图片如果在角上, ...

  8. MIUI6&7桌面角标开源代码简介

    MIUI6&7桌面角标开源代码简介 MIUI6&7上重新设计了桌面app图标的角标显示,基本规则如下: 一.基本介绍 1.默认的情况 当app 向通知栏发送了一条通知 (通知不带进度条 ...

  9. css实现角标

    效果图: 简单方式可以使用背景图片,但这里我使用的css来实现,最笨的方式是使用矩形div然后旋转遮挡就可以, <div class='checked-item'>    角标实现 < ...

随机推荐

  1. 针对降质模型中的模糊SR

    (PDF) Deep Plug-and-Play Super-Resolution for Arbitrary Blur Kernels https://www.researchgate.net/pu ...

  2. 纯CSS制作的TAB选项卡

    代码 这里主要使用表单的单选按钮来实现这个TAB显示和隐藏,首页tab里的内容默认隐藏,如果单选按钮为选中状态(checked)就显示内容.具体请看下面代码. 关于兼容性,因为是用CSS3来制作的,所 ...

  3. mysql初始化时报错bin/mysqld: error while loading shared libraries: libnuma.so.1: cannot open shared object file: No such file or directory的处理

    问题描述: 今天新安装了一个linux虚拟机,然后安装mysql 5.7.21,在进行初始化的时候,报错 bin/mysqld: error : cannot open shared object f ...

  4. 理解linux 块, i节点

    https://blog.csdn.net/zdf19/article/details/54424880 https://www.cnblogs.com/hnrainll/archive/2012/0 ...

  5. DTD与模式

    摘要 我们在制作页面时必须要测的就是IE浏览器,毕竟IE浏览器市场占有率还是很高.随着HTML5的流行,可能项目要求兼容IE最低版本为IE8或者更高,但是还是有很多项目兼容IE低版本.所以我们经常会碰 ...

  6. Oauth2.0（一）：为什么需要 Oauth2.0 协议？

    假设有两家互联网企业 A 和 B,其中 B 是一家提供相片云存储的公司.即 B 的用户可以把相片上传到 B 网站上长期保存,然后可以在不同的设备上查看.某一天,A 和 B 谈成了一项合作:希望 B 用 ...

  7. Lottie 动画库

    强大的动画库,且同时支持 android.ios.react native 和 web http://airbnb.io/lottie/

  8. Unity弹出MessageBox

    [DllImport("User32.dll", SetLastError = true, ThrowOnUnmappableChar = true, CharSet = Char ...

  9. AE插件开发的一些总结

    首先会遇到第一个问题,为什么输出的aex文件不在bin目录下,而在别的目录下.其实问题出在链接器的设置里.把这个改成自己想要的目录就OK 然后一些object的报错,直接把警告等级改成0就可以了.属性 ...

  10. [PyCharm] 设置自动启动时自动打开项目

    设置启动PyCharm时自动打开(或不打开)上次进行的项目: 选择 “Settings - General - Reopen last project on startup”,勾选该选项则启动时自动打 ...