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. git恢复删除的分支及内容

    git 删除分支git branch -D 分支名 git查看分支 git branch -a git 删除远程分支 git push origin :分支名 这里注意:git分支提交并且push了, ...

  2. jenkins 启动slave，出现com.sun.deploy.net.FailedDownloadException: Unable to load resource: http://127.0.0.1:8080/jnlpJars/remoting.jar

    master: linux slave: win7 64位系统 在配置好系统后,采用jnlp的方式启动slave节点,报错如下: com.sun.deploy.net.FailedDownloadEx ...

  3. Java开发者需要学习的移动开发编程语言

    编程语言(programming language),是用来定义计算机程序的形式语言.它是一种被标准化的交流技巧,用来向计算机发出指令.一种计算机语言让程序员能够准确地定义计算机所需要使用的数据,并精 ...

  4. Linux系统安装workerman,启动wss 服务

    安装workerman其实很简单,只要会简单的linux口令就可以搞定, 这里我给大家演示一下如何安装workerman 进入终端的过程就不用演示了吧... 输入root及密码进入终端后找到站点根目录 ...

  5. JS三种简单排序算法

    冒泡排序:最简单.最慢.长度小于7的时候最优 插入排序:比冒泡要快比快速排序和希尔排序慢,数据量小的时候优势大 快速排序:速度很快  //js利用systemSort进行排序 systemSort: ...

  6. 如何使用Maven scope

    maven 有6个scope类型,下面简单总结备忘下 <dependency> <groupId>javax.servlet</groupId> <artif ...

  7. passport登录问题：passport.use 方法没有被调用

    写passport登录验证时,无论如何passport.use 方法都没有被调用,最后在同事的帮助下,才找到问题: 我是用form提交登陆数据的, input type:"text" ...

  8. ZooKeeper 未授权访问漏洞

    ZooKeeper 安装: Zookeeper的默认开放端口是2181 wget https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zooke ...

  9. iOS开发--打印NSRange,CGRect等结构体

    使用对应的转换NSStringFromCGPoint   NSStringFromCGSize   NSStringFromCGRect  NSStringFromCGAffineTransform  ...

  10. Nginx 用户认证

    访问一些比较私密的页面 ( 如管理后台,数据后台 ) 时,我们就可以设置访问该页面时需要使用用户名和密码进行验证,这就是用户认证 [root@localhost ~]$ cat /usr/local/ ...