6

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と同じようにするにはどうすればよいか、誰か助けてください。ありがとうございました。

4

1 に答える 1

15

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>

.iconまた、アイコンを cssの背景画像として定義し、imgタグを削除します。

于 2013-03-30T15:06:11.047 に答える