Question

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

<style>
    .icon {
        width:30px; 
        height:30px;
    }
    .txt {
        padding:-10px 0 0 10px;
        background:red; 
        font-size:xx-small;
    }
</style>

<div class="icon">
    <img src="icon.bmp" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

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

Answer 1

只需使用position: relative;作为图标，position: absolute;作为文字。使用top和left定义与图标的距离。

.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;
}

<div class="icon">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

我还会将图标定义为带有css的.icon的背景图片，然后移除img标记。

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

1 个答案: