1

最近、 Google の Blogger を使用して自分のブログを作成しました。

特定の本を読み終えると、その本の「読んだ」セクションがあり、静的な5 つ星評価システムを代わりに使用したいと考えています。おそらくCSSを使用して、各本をターゲットにできるので、訪問者に1 つから 5 つの星を表示できます。

個々のブログ投稿のCSSを編集する方法がわからないので、これらの特定の読書本を対象にすることができます。表示されますか (5 つ星の場合は 100%、4 つ星の場合は 80%、3 つ星の場合は 60% など)?

4

3 に答える 3

4

このメソッドは、 JavaScript、jQuery、CSS、またはCSS3を使用しません。

明確にするために：プレーンASCIIコードを使用してSTAR要件を提供します。

Solid Star: ★ Solid Star
の ASCII コード:★

アウトライン星: ☆アウトライン星
の ASCII コード:☆

ライブデモは次のとおりです (申し訳ありません jsFiddle! ):


本のタイトル:歯医者への旅
本の著者: Yin Pain & Lord Howard Hurts
評価: ★☆☆☆☆

本のタイトル:胸の痛み
本の著者: I. Coffalot
星評価: ★★☆☆☆

本のタイトル:スカンクとの取引
著者: Stan Back
スター評価: ★★★☆☆

本のタイトル: Real Eyes Realize Real Lis
本の著者: IC You
星評価: ★★★★☆

本のタイトル: Spots On The Wall
本の著者: Who Flung Poo
星の評価: ★★★★★



上記の 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 font properties星のサイズ、色、背景を変更してカスタマイズするために使用します。

于 2012-07-03T08:35:56.787 に答える
1

jQuery Star Rating Pluginを使用します。CSSのみの方法
は後半を参照。

これはjQuery Star Rating Pluginのスクリーンショットです。データベース統合タブには、より多くのプラグインの例があり、必要に応じて、いつでもここでさらに多くのjQuery Star プラグインを検索できます。

スクリーンショット: ここに画像の説明を入力

参照：

jQuery Star Rating プラグインの jsFiddle デモ

jsFiddle jQuery の星評価デモのスクリーンショット:

ここに画像の説明を入力

jQuery Star Rating プラグインが使用する最小限の 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>


上記と以下は、この回答に対する 2 つの非常に異なるソリューションです。

jQuery プラグインや JavaScript を使用せずに、純粋な CSS 評価システムを使用します。
jQuery Star Rating Plugin メソッドについては、上記の前半を参照してください。

使用された参照画像は、ホットリンク可能なimageshack.us からのもので、以下に示されています。
寸法はwidth:98px;でheight:143px;、画像のタイプはjpgです。

     ここに画像の説明を入力

参照：

純粋な CSS 星評価の jsFiddle デモ

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 */
}
于 2012-07-01T07:38:45.297 に答える
1

style次の属性を使用して、特定のタグの CSS を変更できます。

<span class="stars" style="width: 80px"></span>

クラスは次の.starsようになります。

background: url(stars.png) repeat-x;

stars.pngは 20px 幅の画像で、x 次元で 4 回 (80px) 繰り返されて 4 つの星が表示されます。5 つ星は 100px 幅などになります。

上記の一般的なアイデアは、この jsFiddle Demo で実現されており、チュートリアルのコメントが完備されています。

参照：

Repeatable Star Rating CSS デモをフィーチャーした jsFiddle デモ

スクリーンショット:
ここに画像の説明を入力

于 2012-07-01T07:24:16.410 に答える