Maison > Article > interface Web > Utilisez HTML pour créer un exemple d'avis cinq étoiles de type Taobao
Utilisez HTML pour créer un exemple d'avis cinq étoiles de type Taobao
- 零下一度original
- 2017-05-13 14:22:524943parcourir
J'ai récemment obtenu une note de cinq étoiles sur un projet. L'affichage de la note doit être précis à la virgule près. Autrement dit, si la note est de 4,3 points, 4,3 étoiles seront affichées. Cela peut sembler difficile, mais c'est le cas. très simple à faire.
Tout d'abord, faisons le tri dans nos réflexions sur la manière d'obtenir cet effet. En raison de ce score, il est facile de penser à la barre de progression, nous avons donc pensé à utiliser un masque. pour y parvenir. La méthode est très simple. Placez l'image de l'étoile grise en dessous, puis placez l'image de l'étoile brillante par-dessus. Superposez les deux images, et contrôlez l'image de l'étoile brillante ci-dessus pour afficher sa longueur en fonction. à la partition. Cela peut être réalisé. Cela a pour effet. Sans plus tarder, collez simplement le code.
<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>【Recommandations associées】
1 Recommandation spéciale : "boîte à outils du programmeur php" V0 .1. téléchargement de la version
2. Tutoriel vidéo en ligne HTML gratuit
3. tutoriel vidéo html5 original
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!