Делаем красивые CSS списки для сайта

Красивые списки являются одним из элементов красивого дизайна. Приступим сразу к делу.

Вводное замечание: Делать эти списки мы будем с помощью CSS. В уроке будет рассмотрено несколько практических примеров.

Комплект изображений для этого урока, можете скачать здесь.

Пример №1


  • ДЕНЬГИ СОЗДАЮТ ДОБРО!
  • ДЕНЬГИ СОЗДАЮТ КОМФОРТ!
  • ДЕНЬГИ ПРЕКРАСНЫ И ХОРОШИ!
  • БОГАТСТВО ЭТО ЧИСТАЯ ЭНЕРГИЯ!
  • Я ЛЮБЛЮ ДЕНЬГИ!
  • ДЕНЬГИ ПРИНОСЯТ МНОГО ХОРОШЕГО!
  • ДЕНЬГИ ПРИНОСЯТ СЧАСТЬЕ!

Прописываем в css файле следующие строки:

/*Говорим, что кружки надо заменить картинкой arrow.gif*/
          .arrow {
          list-style-image: url(lessons/2008/beautifullist/arrow.gif); /*Путь пишите свой*/
          }
          /* Чтобы появился зелёный фон прописываем следующее*/
.li { background-color: #C8F612; }

В html файл пишем следующее:

<ul class="arrow">
<li class="li">ДЕНЬГИ СОЗДАЮТ ДОБРО!</li>
<li>ДЕНЬГИ СОЗДАЮТ КОМФОРТ!</li>
          <li class="li">ДЕНЬГИ ПРЕКРАСНЫ И ХОРОШИ!</li>
          <li>БОГАТСТВО ЭТО ЧИСТАЯ ЭНЕРГИЯ!</li>
          <li class="li">Я ЛЮБЛЮ ДЕНЬГИ!</li>
          <li>ДЕНЬГИ ПРИНОСЯТ МНОГО ХОРОШЕГО!</li>
          <li class="li">ДЕНЬГИ ПРИНОСЯТ СЧАСТЬЕ!</li>
          </ul>

 

Пример №2

  •  You truly can have anything you can imagine.
  •  Ты действительно можешь добиться всего, что только можешь себе представить.

Прописываем в css файле следующие строки:

/*Говорим, что кружки надо заменить картинками и сделать отступы*/
          .arrow_clock {
          list-style-image: url(img/articles/clock.png); /*Путь пишите свой*/
          margin-top: 7px;
          margin-bottom: 7px;
          }
          .arrow_on {
          list-style-image: url(img/articles/public.png); /*Путь пишите свой*/
          margin-top: 7px;
          margin-bottom: 7px;
          }

В html файл пишем следующее:

<ul>
          <li class="arrow_clock">You truly can have anything 
          you can imagine.</li>
<li class="arrow_on">Ты действительно можешь добиться всего, что только
можешь себе представить.</li>
</ul>

В завершении урока, хотел бы дать вам один небольшой совет: Прежде чем использовать изображения в качестве маркеров, обязательно оптимизируйте их в Fireworks MX или Photoshop.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 30 Декабря 2007
Просмотров: 66730
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 15 Мая 2008 20:29
    Николай
    Евгений здравствуй ! "Комплект изображений для этого урока, можете скачать здесь" - ЭТА ССЫЛКА НЕ РАБОТАЕТ.
  • 25 Мая 2008 21:12
    Роман
    Евгений здравствуйте ! ССЫЛКА НЕ РАБОТАЕТ.
  • 28 Мая 2008 12:29
    Евгений Попов
    Исправлено
  • 13 Ноября 2008 07:14
    Жамшид
    У МЕНЯ ЕСТЬ ТВОЙ ВИДИО УРОК МНЕ ПОНРАВИЛАСЬ СПАСИБО
  • 16 Января 2009 12:58
    Александр
    Евгений здравствуйте, как можна с вани связаться по емейлу?
  • 19 Марта 2009 01:12
    barometre
    ссылка работает
  • 7 Апреля 2011 20:19
    Deadcow
    У вас две строчки кода в первом примере случайно попали под /* комментарий */, из-за этого не появляется картинка arrow.gif и теряется вся соль примера)
  • 6 Мая 2014 09:30
    ishkiniaev
    http://4brown.ru/
^ Наверх ^