CSS自适应实现图标右上角消息数字提示

效果如下：一共改过两次
改后

改前：存在的问题
当数值为一位数时，底部应该是一个完整的圆形

//改前
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.msg {position: relative;width: 60px;height: 60px;margin: 60px;float:left;}.msg img {width: 60px;height: 60px;}.alarm {position: absolute;color: white;font-size: 17px;background-color: red;/*height: 24px;改前*/min-height: 24px;/*改后新增的代码*/min-width:24px;/*改后新增的代码*/line-height: 24px;right:-12%;top: -12px;text-align: center;-webkit-border-radius: 24px;border-radius: 24px;padding:2px;}</style></head><body><div class="msg"><img src="img/1.png" /><div class="alarm">50000</div></div></body>
</html>

最后附上，min-height和min-width的使用场景
https://blog.csdn.net/qq_36337754/article/details/97243930

CSS自适应实现图标右上角消息数字提示相关推荐

CSS仿微信头像右上角消息数字提示
今天写个简单的小demo,关于CSS实现头像右上角消息数字提示,样式如下如图所示,在微信和扣扣消息里面比较常见. <!DOCTYPE html> <html><head& ...
CSS实现头像右上角消息数字提示
今天写个简单的小demo,关于CSS实现头像右上角消息数字提示,样式如下如图所示,在微信和扣扣消息里面比较常见. <!DOCTYPE html> <html><head& ...
微信消息提醒与消息数字提示之BadgeView
微信消息提醒与消息数字提示之BadgeView BadgeView 一个可以自由定制外观.支持拖拽消除的 MaterialDesign 风格 Android BadgeView. GitHub地址:h ...
App图标右上角的数字设置
/ / 将app图标右上角的数字设置为10 [UIApplication sharedApplication].applicationIconBadgeNumber = 10;
IOS应用图标上的数字提示实例
作者:朱克锋邮箱:zhukefeng@iboxpay.com 转载请注明出处:http://blog.csdn.net/linux_zkf IOS应用图标上的数字提示实例 - (void) upda ...
关于Android类似qq和微信那种在桌面图标右上角更新数字的研究
记录下这个需求的研究写的超级随意大家凑合看不懂再问一起探讨因为我们的产品也需要有即时通讯了消息更新不可避免首先要实现这个功能当然是要借助系统的Launcher. 而谷歌并 ...
Android实现再图标右上角显示数字
最近有一个需求就是需要把购物车的图标右上角加一个数字自定义ImageView如下: public class NumImageView extends ImageView {//要显示的数量数量pr ...
图标右上角的数字小圆圈如图在tabBarController中设置
//图标右上角内容self.tabBarItem.badgeValue=@"5";运行效果:
在IPhone桌面的应用程序图标右上角显示数字
能够在ios桌面的程序icon右上角显示数字(badge number)的方法: 在ViewController中的viewDidLoad方法中添加如下代码即可: [cpp] view plain ...

CSS自适应实现图标右上角消息数字提示

CSS自适应实现图标右上角消息数字提示相关推荐

最新文章

热门文章