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. 父组件中vuex方法更新state，子组件不能及时更新并渲染的解决方法

    场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...

  2. V8学习资源

    http://wenku.baidu.com/link?url=7mk6ib9IJ-1K_-bFVZ-fXXo2nbI3jOJ3cnhr3XC3b08fPOKkc9v8vSAd-DgNMJZ2vdjg ...

  3. crontab修改默认编辑器

    crontab默认编辑器为nano 修改crontab默认编辑器为vi或者其他的编辑器 可以用命令select-editor修改 改为3或者4 再用crontab -e 就是vim打开了

  4. 【百度地图API】制作多途经点的线路导航——路线坐标规划

    一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,大家可以采用更加简短的方式引用API的JS啦~ <script type="text/javascript&q ...

  5. 五大行获央行5000亿SLF 相当于降准0.5%

    人民网北京9月17日电 (吕骞)据新浪财经报道,9月16日收盘后,市场传央行当天对五大行进行5000亿SLF操作,性质类同基础货币的投放,近似全面降准0.5个百分点.国泰君安.国信等数家机构晚间证实传 ...

  6. Linux less 常用导航命令

    linux中经常用less来查看文件,文件较短的时候用pgup(pageup), pgdn(pagedown),↑,↓几个键够,但是当文件比较长的时候用一些快捷键就能很方便实现快速导航. 1. 按匹配 ...

  7. linux环境中安装ftp服务

    需求说明: 今天项目中有一个新的需求,需要在linux环境中搭建一个ftp服务,在此记录下. 操作过程: 1.通过yum的方式安装ftp服务对应的软件包 [root@testvm01 ~]# yum ...

  8. kendo-ui下拉树形选择(DropDownTreeView)

    摘要: 最近项目中有一个特殊的需求,下拉选择部门,但是部门的层级关系要在下来框中体现出来,如下图 下面我就把实现的过程分享给大家,代码如下: dropdowntreeview.js /* * * Dr ...

  9. Linux中实现多网卡绑定总结

    在Linux中实现多网卡绑定 一.原理介绍: 1.什么是bonding? Linux bonding 驱动提供了一个把多个网络接口设备捆绑为单个的网络接口设置来使用.用于网络负载均衡及网络冗余: Li ...

  10. SpringMVC由浅入深day01_7入门程序小结

    7 入门程序小结 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法. 前端控制器配置: 处理器映射器: 非注解处理器映射器(了解) 注解的处理器映射器(掌握) ...