Добавить в избранное

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

Дата: 2011-10-13

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

Вводное замечание: Делать эти списки мы будем с помощью CSS. В уроке будет рассмотрено несколько практических примеров.
Демо | Скачать
Комплект изображений для этого урока, можете скачать здесь.

Пример №1


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

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

 

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

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

 

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

 

Пример №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 файл пишем следующее:

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

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

сайт tiwebmaster.ru

Просмотров: 2354

Последние 5 уроков

Стильное поле поиска на CSS3

Поле поиска, вероятно, является одним из распространенных элементов интерфейса пользователя. Работая над уровнем удобства интерфейса очень часто возникает желание добавить стильное поле поиска. В данном уроке мы создадим такой популярный элемент с помощью псевдо-элементов.


Как с помощью CSS сделать фон на всю страницу?

Из этого урока Вы узнаете как сделать фон на всю страницу, при этом Вам будет не важно, какое разрешение на мониторе того посетителя, который будет смотреть Ваш сайт.


Смена фона блока информации при наведении мыши

Интересный эффект смены фона блока с текстом при наведении мыши. Реализовано с помощью HTML+CSS.


Как сделать красивую полосу прокрутки на Вашем сайте?

Изучив этот урок, Вы узнаете как изменить дизайн полосы прокрутки на Вашем сайте таким образом, чтобы она вписывалась в остальной дизайн сайта.


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

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


Видео уроки по php,jquery,ajax,css,html,сео