Maison > interface Web > tutoriel HTML > le corps du texte

Utilisez HTML pour créer un exemple d'avis cinq étoiles de type Taobao

零下一度
Libérer: 2017-05-13 14:22:52
original
4934 Les gens l'ont consulté

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>
Copier après la connexion

【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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal