CSS小紅點提示是一種在網(wǎng)頁設(shè)計中常見的技巧,可以用來提示用戶某些消息或者提醒用戶注意某些內(nèi)容。下面介紹一下如何使用CSS實現(xiàn)小紅點提示。
HTML代碼: <div class="wrapper"> <div class="box"> <margin>這是需要提示的內(nèi)容</margin> <span class="dot"></span> </div> </div> CSS代碼: .wrapper { display: flex; justify-content: center; align-items: center; height: 100%; } .box { position: relative; width: 200px; height: 100px; background-color: #eee; text-align: center; } margin { display: block; margin-top: 30px; } .dot { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; background-color: #f00; border-radius: 50%; z-index: 1; }
以上代碼實現(xiàn)了一個帶有小紅點提示的框,可以根據(jù)需要自行修改樣式。其中,紅點的樣式通過CSS中的.dot
來控制,其樣式設(shè)置了絕對定位、大小、顏色等。
如果需要在相對應(yīng)的<span>
標(biāo)簽中插入其他內(nèi)容或者圖標(biāo),可以根據(jù)需要進行修改,增加相應(yīng)的內(nèi)容。同時,也可以在CSS中通過修改.box
標(biāo)簽的屬性,來調(diào)整框的大小和樣式。