javascript - 如何编辑一篇博文的 CSS 而不是其他博文以获得 5 星评级系统？

Question

我最近创建了 my own blog使用 Google 的 Blogger。

当我读完一本书后，我有一个 Book's I Read Section我想用静态的 5 星评级系统 代替某种类型。也许使用 CSS，我可以定位每本书，这样我就可以显示 1 到 5 颗星以供访问者查看。

我不确定如何编辑个别博客文章的 CSS，以便我可以针对这些特定的阅读书籍(如果这是最好的方法)，并且希望获得有关创建图像的任何提示可以指定应显示多少 5 星(例如 5 星 100%、4 星 80%、3 星 60% 等)？

Answer 1

此方法不使用JavaScript、jQuery、CSS 或CSS3 .

澄清一下:它使用纯ASCII 代码 来提供STAR 要求。

实心星: ★
实心星的 ASCII 码:★

大纲之星: ☆
轮廓星的 ASCII 码:☆

现场演示如下(sorry jsFiddle!):

---

书名:牙医之旅
书籍作者:尹佩恩和霍华德勋爵
星级:★☆☆☆☆

---

---

书名:胸痛
图书作者: I. Coffalot
星级:★★☆☆☆

---

---

书名:处理臭鼬
图书作者:斯坦贝克
星级:★★★☆☆

---

---

书名:真眼识破真谎言
书籍作者: I.C.你
星级: ★★★★☆

---

---

书名:墙上的 Blob
图书作者:谁扔便便
星级: ★★★★★

---

上面的 HTML 标记:

Book Title: A Trip To The Dentist<br />
Book Author: Yin Pain & Lord Howard Hurts<br />
Star Rating: &#9733;&#9734;&#9734;&#9734;&#9734;<br />

Book Title: Chest Pain<br />
Book Author: I. Coffalot<br />
Star Rating: &#9733;&#9733;&#9734;&#9734;&#9734;<br />

Book Title: Dealing With Skunks<br />
Book Author: Stan Back<br />
Star Rating: &#9733;&#9733;&#9733;&#9734;&#9734;<br />

Book Title: Real Eyes Realize Real Lies<br />
Book Author: I.C. You<br />
Star Rating: &#9733;&#9733;&#9733;&#9733;&#9734;<br />

Book Title: Spots On The Wall<br />
Book Author: Who Flung Poo<br />
Star Rating: &#9733;&#9733;&#9733;&#9733;&#9733;<br />

★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★

可选:使用 CSS 字体属性更改星星大小、颜色和背景以对其进行自定义!