CSS是網頁設計中常用的一種樣式表語言,常常用來控制頁面中各個元素的樣式,本文將介紹如何利用CSS讓數字在右上角。
代碼如下: .badge { position: relative; border-radius: 50%; background-color: red; color: white; font-size: 12px; padding: 2px 5px; } .badge::after { content: ''; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: red; } 其中,.badge是一個容器,它的position屬性被設為relative,保證內部元素的定位依照此容器。border-radius和background-color屬性用來設定該容器的樣式和背景顏色,font-size和padding屬性用來控制文字字號和內邊距。
接下來,使用偽類:after來設定一個圓形小圖標,在容器的右上角:其中content屬性用來生成新的內容,position為absolute保證元素定位相對于它的父元素。top和right屬性用來控制該元素的偏移位置,border-radius和background-color屬性用來設定該小圖標的圓形和背景顏色。
最終,通過這樣的設置,我們可以方便地在網頁中顯示數字的數量,增強頁面的交互性和美觀性!