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

前端之家收集整理的这篇文章主要介绍了html – 制作带通知计数的通知图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想在我的网站上制作一个像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标签.

猜你在找的HTML相关文章