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. Unity UGUI 的RectTransform参数的设置

    1.改变RectTransform的top GetComponent<RectTransform>().offsetMax = new Vector2(GetComponent<Re ...

  2. yum常用操作

    一.yum安装使用: 1.Yum:rpm的前端程序,用来解决软件包相关依赖性,可以在多个库之间定位软件包,up2date的替代工具 2.yum repository:yum repo,存储了众多rpm ...

  3. SpringBoot------连接mysql时出现警告：Establishing SSL connection without server's identity verification is not recommended

    SpringBoot连接MySQL时出现警告: 英文: Mon Jun :: CST WARN: Establishing SSL connection without server's identi ...

  4. SpringMVC由浅入深day02_1课程安排_2包装类型pojo参数绑定_3集合类型绑定

    springmvc第二天 高级知识 复习: springmvc框架: DispatcherServlet前端控制器:接收request,进行response HandlerMapping处理器映射器: ...

  5. Linux oracle数据库创建表空间、用户并赋予权限

    管理员用户登录oracle数据库 1.创建临时表空间 select name from v$tempfile;查出当前数据库临时表空间,主要是使用里面的存放路径: 得到其中一条记录/opt/oracl ...

  6. RabbitMQ :VHost,Exchanges, Queues,Bindings and Channels

    和RabbitMQ这个项目的缘分好奇怪,很长一段时间内是只关注源代码,真的是Erlang开源项目中的典范;现在要在项目中应用RabbitMQ,从新的视角切入,全新的感觉.仿佛旧情人换了新衣,虽是熟稔却 ...

  7. laravel 5.3升级5.4

    1)修改 composer 配置文件 composer.json 1.如果你用了 laravel-admin,larvel-admin 版本改 1.4.x-dev 2.laravel 版本改 5.4. ...

  8. 2. Oracle体系结构

    一. Oracle体系结构图 体系结构图如下: 体系结构图看似简单:其中很有玄机.它对Oracle来讲:相当于武功中的心法.配合体系结构来学Oracle:能起到事半功倍的效果.我们平时遇到Oracle ...

  9. WAF Bypass数据库特性（MSsql探索篇）

    0x01 背景 探索玩了Mysql特性,继续来探索一下MSsql特性. 0x02 测试 常见有5个位置即:select * from admin where id=1[位置一]union[位置二]se ...

  10. php-fpm 配置进程池

    什么是 php-fpm :php 是作为一个独立服务存在的,这个服务叫做 php-fpm什么是 php-fpm pool :也就是 php-fpm 的进程池,这个进程池中运行了多个子进程,用来并发处理 ...