CSS是一種用于網站樣式設計的編程語言。在網站設計過程中,經常需要用到數字角標來表示一些信息,這時我們可以使用CSS來實現數字角標。
/* CSS樣式 */ .badge { position: relative; display: inline-block; } .badge:after { content: attr(data-badge); position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background-color: red; color: white; font-size: 12px; text-align: center; line-height: 20px; border-radius: 50%; }
上述代碼實現了一個數字角標的樣式效果。使用偽元素:after來添加內容,并使用position屬性使其脫離文檔流,實現位置的自由調整。同時,使用border-radius屬性實現圓形效果。其中,data-badge屬性用于添加數字內容。
在HTML中,我們只需要給需要添加數字角標的元素添加badge類即可:
<!-- HTML代碼 --> <a href="#" class="badge" data-badge="5">消息</a>
這時,我們就可以在鏈接上添加一個顯示數字的圓形角標,來顯示消息的數量。