Only two icons are required:
The implementation is as follows: The following code:
<Htmlxmlns= "http://www.w3.org/1999/xhtml"><Head><metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/><title>Star ratings show CSS styling tips</title><Styletype= "Text/css">. Vote-star{Display:Inline-block;/*inline elements are converted into block elements, not wrapped*/Margin-right:6px;width:75px;/*width of 5 stars*/Height:15px;/*height of 1 stars*/Overflow:Hidden;vertical-align:Middle;background:URL (.. /content/images/group/starsblack.png) Repeat-x;}. Vote-star I{Display:Inline-block;/*inline elements are converted into block elements, not wrapped*/Height:15px;/*height of 1 stars*/background:URL (.. /content/images/group/starsyellow.png) Repeat-x;}. Vote-number{vertical-align:Middle;font-family:Microsoft Jacob Black, Verdana,geneva, Sans-serif;font-size:12px;}</style></Head><Body><Divclass= "Star"><Spanclass= "Vote-star"><Istyle= "width:97%"></I></span><Spanclass= "Vote-number">9.7 min</span></Div></Body></HTML>
In your project, you can change the span label to Div
From for notes (Wiz)
List of attachments
- Starsblack.png
- Starsyellow.png
Pure CSS Draw star scoring effects