css 样式 小红点提醒

很多网站，会有未读信息的提醒（如下图：）

这里的样式主要用到定位  

文档链接：https://www.w3school.com.cn/cssref/pr_class_position.asp

0" class="unreadResumeWarning">{{unreadResume}}查看简历

unreadResume是自定义变量（整型），当未读的信息大于0时，提醒的小红点才会出现； 

父级盒子设置css    position: relative;

css样式如下

.posttitle1 {width: 213px;height: 60px;margin: 0 auto;margin-top: 9%;border-bottom: 1px solid #E6E6E6;position: relative;
}.unreadResumeWarning {width: 14px;height: 14px;border-radius: 7px;background-color: #FF3B30;position: absolute;left: 28px;top: 10px;
}.unreadResumeCount {display: block;width: 100%;height: 14px;line-height: 14px;text-align: center;color: #fff;font-size: 12px;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！