製作帶通知數的通知圖標

我想在我的網站上發佈通知圖標，如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一樣。謝謝。

來源

2013-03-30 Arif Reza

我的回答對你有幫助嗎？ –

非常感謝Marcel。這真的是很棒的答案。你會很高興知道這個答案也幫助我找到適合我的許多問題的答案。我非常感謝你。 –

很高興聽到這個，所以請接受答案，以便問題不再「打開」。 –

只需使用position: relative;作爲圖標，使用position: absolute;作爲文本。用top和left定義圖標的距離。

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

我還要定義圖標作爲.icon利用CSS背景圖像並刪除img標籤。

來源

2013-03-30 15:06:11

製作帶通知數的通知圖標

回答

相關問題