html – 制作带通知计数的通知图标

发布时间：2020-12-14 23:06:40 所属栏目：资源来源：网络整理

导读：我想在我的网站上制作一个像facebook这样的通知图标. Facebook会在左上角显示通知图标. 在Facebook上,图标旁边有许多通知.我想做同样的事情.我想在facebook旁边显示通知图标旁边的通知数量.我为此创建了此代码：但它没有发生.请有人帮我,我怎样才能像facebo

我想在我的网站上制作一个像facebook这样的通知图标. Facebook会在左上角显示通知图标.
在Facebook上,图标旁边有许多通知.我想做同样的事情.我想在facebook旁边显示通知图标旁边的通知数量.我为此创建了此代码：


但它没有发生.请有人帮我,我怎样才能像facebook一样.谢谢.


最佳答案
只需使用position：relative;对于图标和位置：绝对;对于文本.
使用顶部和左侧定义图标的距离.

.icon {
    width:30px; 
    height:30px;
    position: relative;
}
.txt{
    background-color:red;
    font-size:xx-small;
    position: absolute;
    padding:2px;
    top: 5px;
    left: 5px;
    border-radius: 25px;
}

我还将图标定义为带有css的.icon的背景图像,并删除img标签.

                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!