Скрипты для ucoz - не совсем та категория, куда нужно вносить эту новость, но все же оставлю ее пока здесь. С помощью небольшего примера, вы узнаете как с помощью css, можно поставить разные иконки возле нужной строки того или иного списка. Ведь всегда очень красиво когда иконка у списка, только не увлекайтесь.
Шаг 1 - Установка HTML
Создаем список с классом spisky:
В нем создаем строки с классом и индификатором. Ссылки на иконки мы укажем в CSS, про это позже:
Code
<li class="ico" id="ico_1"> - Уметь правильно верстать.</li>
В итоге должно получится так:
Code
<ul class="spiski">
<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>
Шаг 1 - Установка CSS
Теперь вставляем в CSS, который находится по пути: П.У - Дизайн - Упр. Дизайном(CSS), следующий код:
Code
.spiski {
list-style-type: none;
font: 125%/1.5 Verdana,Arial,Helvetica, sans-serif; color:#555;
}
.ico {
margin-top: 5px;
padding: 0px 0px 0px 25px;
}
#ico_1 {
background:url('http://wallaby.ucoz.ru/images33/fon_ico_1.png) no-repeat;
}
#ico_2 {
background:url('http://wallaby.ucoz.ru/images33/fon_ico_2.png') no-repeat;
}
#ico_3 {
background:url('http://wallaby.ucoz.ru/images33/fon_ico_3.png') no-repeat;
}
#ico_4 {
background:url('http://wallaby.ucoz.ru/images33/fon_ico_4.png') no-repeat;
}
#ico_5 {
background:url('http://wallaby.ucoz.ru/images33/fon_ico_5.png') no-repeat;
}
Дополнительнительные строки
Если хотите больше строк с разными катинками, добавляем в CSS:
Получить код
#ico_№ {
background:url('ССЫЛКА НА КАРТИНКУ') no-repeat;
}
№ - номер иконки.
В HTML после ul class="spiski" и перед /ul:
Code
<li class="ico" id="ico_№"> - ВАША НАДПИСЬ.</li>
№ - номер картинки что в CSS.