利用HTML制作一個仿淘寶的五星評價實例

來源：懂視網責編：小采時間：2020-11-27 15:33:17

利用HTML制作一個仿淘寶的五星評價實例

利用HTML制作一個仿淘寶的五星評價實例:最近做項目做到一個五星評分的，這個分數的顯示，要精確到小數，就是如果分數是4.3分，就顯示4.3顆星星，這個看上去好像挺難的，但是做起來很簡單。首先我們整理一下思路，這效果要怎么做出來，因為這個分數的原因，很容易讓人聯想到進度條，所以就想到了用遮

推薦度：

點擊下載本文 文檔為doc格式

導讀利用HTML制作一個仿淘寶的五星評價實例:最近做項目做到一個五星評分的，這個分數的顯示，要精確到小數，就是如果分數是4.3分，就顯示4.3顆星星，這個看上去好像挺難的，但是做起來很簡單。首先我們整理一下思路，這效果要怎么做出來，因為這個分數的原因，很容易讓人聯想到進度條，所以就想到了用遮

最近做項目做到一個五星評分的，這個分數的顯示，要精確到小數，就是如果分數是4.3分，就顯示4.3顆星星，這個看上去好像挺難的，但是做起來很簡單。

首先我們整理一下思路，這效果要怎么做出來，因為這個分數的原因，很容易讓人聯想到進度條，所以就想到了用遮罩來出來。做法很簡單，灰色星星的圖片放在下面，然后亮色星星的圖片在上面，重疊兩張圖片，任何控制上面亮色的星星圖片，根據分數顯示它的長度，這樣便能實現這個效果了。廢話不多說，直接把代碼貼上。

<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#bg{
width: 60px;
height: 16px;
background: url("img/star_gray.png");
}
#over{
height:16px;
background:url("img/star_org.png") no-repeat;
}
</style>
</head>
<body>
<div id="bg"><!--這里是背景，也就是灰色的星星-->
<!--說明，這里的width就是設置分數啦，以我寫的為例，一個星星的長度是12px，也就是1分12px，如果是4.3分，就是4.3*12px = 51.6px的長度，當然這個一般是取得數據后用js或者其他模板語言去控制的-->
<div id="over" style="width:51.6px"></div><!--這里是遮罩，設置寬度以達到評分的效果-->
</div>
</body>
</html>

【相關推薦】

1. 特別推薦：“php程序員工具箱”V0.1版本下載

2. 免費html在線視頻教程

3. php.cn原創html5視頻教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com