css定位實現星級展示沒有互動

2021-09-08 20:24:33 字數 646 閱讀 5542

<

div

class

="star_evaluate"

>

<

span

class

="star star_10"

>

span

>

div>

.star_evaluate.star_1.star_2.star_3.star_4.star_5.star_6.star_7.star_8.star_9.star_10}
效果如圖,通過定位放兩張背景圖,外層的放灰色的5顆星圖,內層的也是,寬度根據不同級別來展示,從而實現,

star_1 ,代表半顆星,star_2 代表1顆星,以此類推,即預設比如2.5顆星乘2就是class的字尾數字,以此可以動態展示

要注意這個星星預設為16px*16px,間距5px,展示的星星寬度記得計算間距。

之前看過網友的實現方式,有通過乙個星星平鋪,來顯示的,但是平鋪的這種方式應該是不可以讓星星之間產生間距的,如果有大神有辦法,請一定告訴我,謝謝!

如有寫的不對的地方,還請大家多多指正,感謝檢視!

css實現星級商戶評分

之前看到大眾點評中有星級商戶這樣的標籤感到挺有意思的,就偷偷模仿了下。其實,大眾點評的星級商戶的樣式並沒有用到什麼複雜的外掛程式,只靠css就能輕鬆的實現,並且可以動態的控制。好了,閒話不說了,先來看看怎麼來做吧。首先,我們需要一張,如下所示 然後寫下我們所需的樣式 item rank rst ir...

CSS筆記3 布局 居中 定位 浮動 展示

css筆記3 1.居中 可以使用 2.定位 position 表示定位 2.1絕對定位position absolute left 100px 該元素所在的塊的位置位於這個絕對定位顯示的左上方 top 50px 絕對定位的元素不會干擾到其他元素的位置 position absolute left 1...

css實現垂直居中定位

一 單行內容的居中 設定height與line height相等,overflow hidden即可。demo height 20px line height 20px overflow hidden 注 若不使用overflow hidden,在瀏覽器頁面縮放時會出現問題。二 已知固定寬高 設定定...