ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML を使用して、淘宝網のような 5 つ星のレビューの例を作成する
HTML を使用して、淘宝網のような 5 つ星のレビューの例を作成する
- 零下一度オリジナル
- 2017-05-13 14:22:524971ブラウズ
最近、あるプロジェクトで 5 つ星の評価を獲得しました。スコアの表示は小数点まで正確である必要があります。つまり、スコアが 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 Programmer Toolbox」V0.1 バージョンのダウンロード
3.php.cn オリジナルの HTML5 ビデオチュートリアル
以上がHTML を使用して、淘宝網のような 5 つ星のレビューの例を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。