Скрипты для ucoz - не совсем та категория, куда нужно вносить эту новость, но все же оставлю ее пока здесь. С помощью небольшего примера, вы узнаете как с помощью css, можно поставить разные иконки возле нужной строки того или иного списка. Ведь всегда очень красиво когда иконка у списка, только не увлекайтесь.

Шаг 1 - Установка HTML

Создаем список с классом spisky:

Code

В нем создаем строки с классом и индификатором. Ссылки на иконки мы укажем в 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:

Code

#ico_№ {
  background:url('ССЫЛКА НА КАРТИНКУ') no-repeat;
  }

№ - номер иконки.
В HTML после ul class="spiski" и перед /ul:

Code

<li class="ico" id="ico_№"> - ВАША НАДПИСЬ.</li>

№ - номер картинки что в CSS.

Категория Скрипты для ucoz | Добавил: Wallaby | Просмотров: 2042 |

Комментарии отсутствуют

по актуальности

Чтобы оставить комментарий, необходимо или

Профиль

Привет: Гость
Фото профиля wallaby

Связь с администратором
Регистрация
Забыл пароль
ВХОД
Добавить новость!

Поиск

Иконки возле списка для uCoz

Комментарии отсутствуют

Шаблоны для ucoz

Скрипты для ucoz

Cinema 4D

Графика для uCoz