我最近使用 Google 的 Blogger创建了自己的博客。
当我读完一本书后，我有一个我读过的书部分，我希望有一个静态的5 星评级系统来代替某种形式。也许使用CSS，我可以定位每本书，这样我就可以显示1 到 5 星供访问者查看。
我不知道如何编辑单个博客文章的CSS ，以便我可以针对这些特定的阅读书籍，如果这是最好的方法，并且想要创建图像的任何提示，我可以指定5 星应该是多少显示（如 5 星 100%、4 星 80%、3 星 60% 等）？
问问题
830 次
3 回答
4
此方法不使用JavaScript、jQuery、CSS或CSS3。
澄清一下：它使用纯ASCII 码来提供STAR要求。
实星： ★实星
ASCII 码：★
轮廓星： ☆轮廓星
ASCII 码：☆
现场演示如下（对不起 jsFiddle！）：
书名：牙医之旅
书作者： Yin Pain & Lord Howard Hurts
星级评分： ★☆☆☆☆
书名：胸痛
书作者： I. Coffalot
星级评价： ★★☆☆☆
书名：对付臭鼬
书作者： Stan Back
星级： ★★★☆☆
书名：真眼识真假
书作者： IC优
星评价： ★★★★☆
书名：墙上的斑点
书作者：蒲公英
星级评分： ★★★★★
上面的 HTML 标记：
Book Title: A Trip To The Dentist<br />
Book Author: Yin Pain & Lord Howard Hurts<br />
Star Rating: ★☆☆☆☆<br />
Book Title: Chest Pain<br />
Book Author: I. Coffalot<br />
Star Rating: ★★☆☆☆<br />
Book Title: Dealing With Skunks<br />
Book Author: Stan Back<br />
Star Rating: ★★★☆☆<br />
Book Title: Real Eyes Realize Real Lies<br />
Book Author: I.C. You<br />
Star Rating: ★★★★☆<br />
Book Title: Spots On The Wall<br />
Book Author: Who Flung Poo<br />
Star Rating: ★★★★★<br />
★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★
可选：用于CSS font properties更改星星大小、颜色和背景以自定义它！
于 2012-07-03T08:35:56.787 回答
1
style您可以使用以下属性更改特定标签的 CSS ：
<span class="stars" style="width: 80px"></span>
该类.stars可能如下所示：
background: url(stars.png) repeat-x;
哪里stars.png是 20 像素宽的图像，然后在 x 维度上重复 4 次（80 像素）以获得 4 颗星。5 颗星的宽度为 100 像素，以此类推。
上面的总体思路在这个 jsFiddle Demo 中实现，并附有教程注释。
参考：
截屏：
于 2012-07-01T07:24:16.410 回答
1
使用 jQuery Star Rating 插件。有关仅 CSS的方法
，请参见第二部分。
这是jQuery Star Rating Plugin的屏幕截图。数据库集成选项卡有更多插件示例，如果需要，您可以随时在此处搜索更多 jQuery Star 插件。
截屏：
参考：
jQuery Star Rating Plugin 的 jsFiddle 演示
jsFiddle jQuery Star Rating Demo 截图：
jQuery Star Rating Plugin使用的最小 HTML 标记（非常可配置）：
<span class="bookFiveStar">
<input name="book002" type="radio" class="star" disabled="disabled"/>
<input name="book002" type="radio" class="star" disabled="disabled"/>
<input name="book002" type="radio" class="star" disabled="disabled" checked="checked"/>
<input name="book002" type="radio" class="star" disabled="disabled"/>
<input name="book002" type="radio" class="star" disabled="disabled"/>
</span>
上面和下面是这个答案的两个非常不同的解决方案。
使用没有 jQuery 插件或 JavaScript的纯 CSS 评级系统。
jQuery Star Rating Plugin 方法见上半部分。
使用的参考图像来自热链接imageshack.us，如下所示。
尺寸是width:98px;和height:143px;图像类型是jpg。
参考：
jsFiddle 纯 CSS Demo 截图：
最小的 HTML：
<div class="starsCSS">
<img class="stars3" title="3 Stars" src="http://img366.imageshack.us/img366/6441/stars.jpg" alt="Star Rating Image" />
</div>
完整的 CSS：
/* This class name configures and positions the 6 star image block. */
.starsCSS{
/* The width of the star block uses the entire star.jpg width */
width: 98px;
/* The height of the star block is LIMITED to 23px, i.e. 1 star row. */
height: 23px;
/* This overflow:hidden will ensure only 1 row is ever seen, when aligned properly.
/* That said, later below different classname uses margin-top negitive offset to align. */
overflow: hidden;
/* The placement of the star block is relative to other elements. Adjust px here. */
position: relative;
top: 10px;
left: 155px;
/* Simple light blue border is provided for the image./
/* Your cusom star image may be a .png with transparency so remove this setting. */
border: 2px solid DodgerBlue;
}
/* This CSS Selector consists of classname .starsCSS that has 'img tag'. */
/* This rule will set original image width and original image height for stars.jpg file. */
.starsCSS img{
width: 98px;
height: 143px;
}
/* These 6 classes will position the image so that only the relevant "star row" is seen for .starsCSS */
/* Technically, this first class .stars1 is not needed since nothing changes. */
/* Note stars.jpg is used full width (98px), therefore it's 1 column. */
/* Use margin-left with negative value if your custom image.jpg has 2 or more columns */
/* IF stars.jpg was double in width then "margin-left: -98px;" will hide first column */
.stars1{
margin-top: 0px;
}
/* Reference Image: 143px height divide by 6 star rows = 23.833333px per row. */
/* Hence, star.jpg image is not perfect and it's rounded to 24px per row instead */
/* Since 1 star row is 24px high, classname .stars2 will offset that to get to next row. */
/* That said, the value needs to be negitive since entire image is shifted up (offset). */
/* The class .starsCSS will now show the second star row! */
.stars2{
margin-top: -24px; /* Shift up star row 1 */
}
.stars3{
margin-top: -48px; /* Shift up star rows 1 and 2 */
}
.stars4{
margin-top: -72px; /* Shift 3 rows of stars out of view (24 x 3 = 72 ) */
}
.stars5{
margin-top: -96px; /* Shift 4 rows of stars out of view */
}
.stars6{
margin-top: -120px; /* Shift 5 rows of stars out of view */
}
于 2012-07-01T07:38:45.297 回答