CSS实现头像右上角消息数字提示

简介: CSS实现头像右上角消息数字提示

今天写个简单的小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>
相关文章
|
前端开发 测试技术 容器
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
有设想过,当你鼠标移入头像时,展现出从圆圈或洞中探出的那种效果吗?我有类似的想法,但采用了不同的方式并添加了一些动画。我感觉非常实用,并且可以产生简洁的悬停效果,可以在您自己的头像之类的东西上使用。
【CSS】如何给自己头像打造3D动态悬浮效果?(慎入!有点难)
|
6月前
|
前端开发
纯css实现炫酷头像效果
纯css实现炫酷头像效果
113 0
|
6月前
|
前端开发
CSS圆形头像以及发光效果实现
CSS圆形头像以及发光效果实现
|
前端开发
CSS 小技巧 | 一行代码实现头像与国旗的融合
CSS 小技巧 | 一行代码实现头像与国旗的融合
164 0
CSS 小技巧 | 一行代码实现头像与国旗的融合
|
前端开发 算法
CSS实现随机不规则圆角头像
CSS实现随机不规则圆角头像
401 0
CSS实现随机不规则圆角头像
|
Web App开发 前端开发 JavaScript
碉堡了! 纯 CSS 绘制《辛普森一家》人物头像
  这篇文章给大家分享一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》(The Simpsons)是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。该剧通过对霍默、玛琦、巴特、莉萨和玛吉一家五口生活的描绘,用搞笑的方式自我嘲讽了美国的文化、社会、电视以及人类境况的诸多方面。
987 0
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。