Делаем красивые 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
Просмотров: 67839
Правила перепечатки

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

^ Наверх ^