Вставка повторяющихся значков звездочек в HTML

Question

Вставка повторяющихся значков звездочек в HTML

0

Я добавляю повторяющиеся значки звезд в HTML для отображения рейтинга отелей.

Проблема заключается в том, что для представления рейтингов отелей используется так много тегов "img". Это непросто изменить, потому что длина исходного кода становится длинной.

Могу ли я сделать псевдоним для длинного тега img?

Или, если у кого есть хорошее решение, я буду признателен, спасибо.

Ashram Kane 14 март 2014, в 03:50

Источник

Теги:

html

image

alias

2 ответа

Ещё вопросы

Amarnath Balasubramanian · Answer 1 · 2014-03-14T00-49-00.000Z

HTML

<div id="first">
    <div class="img"></div>
</div>
<div id="second">
    <div class="img"></div>
</div>

CSS

#first {
    width:300px;
    float:left;
    display:inline-block;
}
#second {
    width:300px;
    float:left;
    display:inline-block;
}

.img
{
background:url('http://www.letsgodigital.org/images/artikelen/35/nikon-d90-test-sample.jpg');
    width:250px;
    height:200px;
}

Fiddle.. !!

misterManSam · Answer 2 · 2014-03-13T23-43-00.000Z

Вот фантастический урок - CSS Tricks

Из статьи:

Демо- демо-ссылка!

HTML

<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

CSS

.rating {
 unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "\2605";
position: absolute;
}