Всем приветы и ответы!
Сегодня я хочу поговорить о том, как с помощью CSS стилей можно поставить разные PNG иконки в списках на сайте!
Реализуется данная идея очень легко, мы берём обычные списки <li>, убираем стиль маркировки и прописываем иконки и отступы.
Смотрим реализацию!
HTML каркас
Для начала, пропишем HTML код списков:
<ul class="spiski-ul">
<li class="ico" id="ico_1"> - Уметь правильно верстать</li>
<li class="ico" id="ico_2"> - Потратить своё время правильно</li>
<li class="ico" id="ico_3"> - Задуматься о безопасности в интернете</li>
<li class="ico" id="ico_4"> - Стать настоящим администратором</li>
<li class="ico" id="ico_5"> - Найти новых пользователей</li>
</ul>
Установим CSS:
А теперь в файл под названием style.css надо прописать вот такой код:
/* Иконка у списка с помощью CSS
------------------------------------------*/
.spiski-ul {
padding: 25px;
background:#f2f4f8;
list-style-type: none;
font: 115%/1.5 Verdana,Arial,Helvetica, sans-serif;
color:#555;
}
.ico {
margin-top: 15px;
padding: 0px 0px 0px 25px;
}
#ico_1 {background:url(fon_ico_1.png) no-repeat;}
#ico_2 {background:url(fon_ico_2.png) no-repeat;}
#ico_3 {background:url(fon_ico_3.png) no-repeat;}
#ico_4 {background:url(fon_ico_4.png) no-repeat;}
#ico_5 {background:url(fon_ico_5.png) no-repeat;}
Хочу отметить, что самая распространённая ошибка которую делают многие новички:
- ставят разные по-размеру и стилю иконки
- не выравнивают текст списка по центру
На этом всё, спасибо за внимание!
А Вы оставите комментарий первым?