快捷導(dǎo)航

非常漂亮的css星級效果總結(jié)第1/2頁

更新時間：2007年12月05日 21:06:06 投稿：mdxy-dxy

這篇文章結(jié)合實例形式歸納總結(jié)了css實現(xiàn)星級效果的設(shè)置技巧與注意事項,代碼簡潔實用,需要的朋友可以參考一下

用純css打造星級評分效果正在被越來越多地應(yīng)用在網(wǎng)絡(luò)RIA中，結(jié)合ajax等技術(shù)，可以渲染出很出色的視覺效果和很棒的用戶體驗，在這篇文章開始之前，大家可以先去cssheaven感受一下。

最近由于項目需要，我在網(wǎng)上找了很多css星級評分的例子和說明，但是發(fā)現(xiàn)大多數(shù)都是翻譯國外的文章，而且解釋得并不是非常清楚，所以我決定自己來做一個總結(jié)，也希望能夠給大家一些幫助。

首先用中文寫一下這個效果的算法：
1. 使用背景圖片的位置切換來獲得星級效果；

2. 整個效果最關(guān)鍵的地方就是“三層理論”，整個效果分為三層——空分層、分?jǐn)?shù)層和打分層，三層的布局均為absolute，以避免ul本身自帶的相對布局（當(dāng)然用div也可以獲得同樣效果）；
3. 空分層就是使用背景圖片中的“空星”作為背景，并橫向平鋪；
4. 分?jǐn)?shù)層的寬度等于（分?jǐn)?shù)*圖片寬度）得到的數(shù)值，并且使用背景圖片中的“分?jǐn)?shù)星（例子中為黃色）”作為背景橫向平鋪；
5. 打分層就是將5個空鏈接置于5個星星的位置上（寬度要和背景圖片吻合），并將5個a：hover的背景設(shè)為“打分星（這里為綠色）”，寬度設(shè)為星數(shù)*圖片寬度，left為0(靠左，這樣結(jié)合a：hover不同的寬度就可以出現(xiàn)打分效果)，垂直坐標(biāo)小于a的垂直坐標(biāo)（以確保當(dāng)前a：hover不會遮擋住其他鏈接）；