[英]How do I edit the CSS of one blog post but not others to have a 5 Star Rating System?
我最近使用Google的Blogger创建了自己的博客 。
当我完成阅读特定书籍时,我会拥有一个书籍的“我阅读”部分 ,在这里我想拥有一个静态的5星级评分系统来代替某种形式。 也许使用CSS ,我可以定位每本书,因此我可以显示1到5星,以供访客查看。
我不确定如何编辑各个博客文章的CSS ,因此,如果这是最好的方法,那么我可以针对这些特定的已读书籍,并想知道创建图像的任何技巧,我可以指定应该将5星分为多少颗显示(例如5星100%,4星80%,3星60%等)?
这种方法不使用JavaScript,jQuery的 ,CSS或CSS3。
需要说明的是:它使用纯ASCII码提供STAR要求。
实心星: ★
实心星号的ASCII代码: ★
轮廓星: ☆
轮廓星的ASCII码: ☆
实时演示遵循( 对不起jsFiddle! ):
书名:牙医之旅
图书作者:尹佩恩和霍华德勋爵
星级: ★☆☆☆☆
书名:胸痛
图书作者: I. Coffalot
星级: ★★☆☆☆
书名:与臭鼬打交道
本书作者: Stan Back
星级: ★★★☆☆
书名:真眼识真谎
图书作者: IC You
星级: ★★★★☆
书名:墙上的斑点
图书作者: Who Flung Poo
星级: ★★★★★
上面的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
更改星形大小,颜色和背景以对其进行自定义!
您可以使用style
属性更改特定标签的CSS:
<span class="stars" style="width: 80px"></span>
.stars
类可能如下所示:
background: url(stars.png) repeat-x;
其中stars.png
是20像素宽的图片,然后在x尺寸上重复4次(80像素)4个星。 5颗星的宽度应为100px,依此类推。
上面的一般想法在此jsFiddle演示中实现,并带有教程注释。
参考:
屏幕截图:
使用jQuery Star Rating插件 。
有关仅CSS方法,请参见第二部分。
这是jQuery Star Rating Plugin的屏幕截图。 Database Integration选项卡包含更多插件示例,如果需要,您可以随时在此处搜索更多jQuery Star Plugins。
屏幕截图:
参考:
jQuery Star Rating插件的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 Pure CSS演示的屏幕截图:
最小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 */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.