CSS消息数字提示

最新推荐文章于 2023-09-20 08:52:36 发布

编程微刊

最新推荐文章于 2023-09-20 08:52:36 发布

阅读量2.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_38822390/article/details/90703704

版权

今天写个简单的小demo，关于CSS实现头像右上角消息数字提示，样式如下如图所示，在微信和扣扣消息里面比较常见。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.alarm {
				position: relative;
				width: 60px;
				height: 60px;
				margin: 60px;
			}
			.alarm img {
				width: 60px;
				height: 60px;
			}
			.divright {
				position: absolute;
				color: white;
				font-size: 17px;
				background-color: red;
				width: 23px;
				height: 23px;
				line-height: 23px;
				left: 80%;
				top: -12px;
				text-align: center;
				-webkit-border-radius: 24px;
				border-radius: 24px;
			}
		</style>
	</head>
	<body>
		<div class="alarm">
			<img src="img/1.png" />
			<div class="divright">
				3
			</div>
		</div>
	</body>
</html>

原文作者：祈澈姑娘关注「编程微刊」公众号，在微信后台回复「领取资源」，获取IT资源300G干货大全。

编程微刊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
CSS消息数字提示

今天写个简单的小demo，关于CSS实现头像右上角消息数字提示，样式如下如图所示，在微信和扣扣消息里面比较常见。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .alarm { ...
复制链接

扫一扫