Меню сайта

Категории раздела
Скрипты [40]
PHP скрипты [6]
Шаблоны [23]
Шаблоны для форумов [1]
Иконки групп [0]
Иконки, кнопки для форума [0]
Видеоуроки [0]
Софт [0]
Другое для uCoz [5]

Мини-чат

Главная » Файлы » Всё для uCoz » Скрипты

Иконки возле списка для uCoz
Категория: Всё для uCoz - Скрипты | Просмотров: 474 | Добавил: WestlE | Дата: 09.05.2012


Скриншоты к Иконки возле списка для uCoz


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

<ul class="spiski">

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


Поделись ссылкой
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа

Поиск по сайту

Свежие новости
1. В ДТП под Пензой попа...
2. Путин подписал указ о...
3. В США экстренно сел с...
4. Задержан напавший на ...
5. Десятки тысяч человек...

Популярная 20-ка
1. ГДЗ по Английскому яз...
2. Шрек 1-5 / Shrek 1-5 ...
3. ГДЗ по Английскому яз...
4. ГДЗ по Английскому яз...
5. ГДЗ по Английскому яз...
6. Folder Guard v8.0 + R...
7. ГДЗ по Английскому яз...
8. ГДЗ по Английскому яз...
9. Камеди Клаб.Звезда ТН...
10. Камасутра XXI века. К...
11. ГДЗ по Английскому яз...
12. ГДЗ по Английскому яз...
13. ГДЗ по Английскому яз...
14. ГДЗ по Английскому яз...
15. ГДЗ по Английскому яз...
16. ГДЗ по Английскому яз...
17. Милый друг / Bel Ami ...
18. ГДЗ по Английскому яз...
19. ГДЗ по Английскому яз...
20. ГДЗ по Английскому (М...

Статистика
Анализ сайта
Онлайн всего: 1
Гостей: 1
Пользователей: 0

CtrlSam © 2025 Яндекс.Метрика