Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены



Уроки CSS


Списки <li> и стили в CSS

Иногда может возникнуть необходимость (желание) изменить стандартный тип маркеров.

Ниже представлен простой пример, как с помощью стиля можно задать некоторый свой стиль маркера.

Сначала убираем маркеры у списка, а потом присваиваем новый.

 <style>
 ul.my_list li {
  list-style-type: none; 
 }
  ul.my_list li:before  {
  content: "> ";  
 }
  </style>
  
  <ul class="my_list">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  </ul>
  • Один
  • Два
  • Три
  • Четыре


Но это может показаться не особо красивым. По этому актуально вместо обычных маркеров назначить какое-нибудь изображение. Картинка, естественно, должна быть маленького размера.

В примере будет подключена маленькая стрелка, нарисованная в программе "Paint".

 <style>
 ul.img_list {
 list-style: url(images/strelka.png);
 }
  </style>
  
  <ul class="img_list">
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
  <li>Четыре</li>
  </ul>


  • Один
  • Два
  • Три
  • Четыре


◄ Предыдущий урок Содержание Следующий урок ►