Heim > Artikel > Web-Frontend > Verwenden Sie HTML, um ein Taobao-ähnliches Fünf-Sterne-Rezensionsbeispiel zu erstellen
Verwenden Sie HTML, um ein Taobao-ähnliches Fünf-Sterne-Rezensionsbeispiel zu erstellen
- 零下一度Original
- 2017-05-13 14:22:524927Durchsuche
Ich habe kürzlich eine Fünf-Sterne-Bewertung für ein Projekt erhalten. Das heißt, wenn die Punktzahl 4,3 Punkte beträgt, werden 4,3 Sterne angezeigt sehr einfach zu machen.
Lassen Sie uns zunächst darüber nachdenken, wie wir diesen Effekt erzielen können. Aufgrund dieser Punktzahl fällt es uns leicht, an den Fortschrittsbalken zu denken, also haben wir über die Verwendung einer Maske nachgedacht um es zu erreichen. Die Methode ist sehr einfach. Platzieren Sie das Bild des grauen Sterns und legen Sie dann das Bild des hellen Sterns darüber. Überlappen Sie die beiden Bilder und steuern Sie das Bild des hellen Sterns oben, um seine Länge entsprechend anzuzeigen zur Partitur Dies kann erreicht werden. Dies hat den Effekt. Fügen Sie ohne weiteres einfach den Code ein.
<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>【Verwandte Empfehlungen】
1. Besondere Empfehlung: "php Programmer Toolbox" V0 .1 Versions-Download
2. Kostenloses HTML-Online-Video-Tutorial
3 Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML, um ein Taobao-ähnliches Fünf-Sterne-Rezensionsbeispiel zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!