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

Вводное замечание: Делать эти списки мы будем с помощью CSS. Тем кто не знает, что это такое, и с чем его едят, рекомендую сначала изучить курс по CSS с диска "Все Технические Моменты Онлайн Бизнеса в Видеоформате. В уроке будет рассмотрено несколько практических примеров.

Пример №1

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

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

/*Говорим, что кружки надо заменить картинкой arrow.gif*/
.arrow {
list-style-image: url(ul/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: 7;
margin-bottom: 7;
}
.arrow_on {
list-style-image: url(img/articles/public.png); /*Путь пишите свой*/
margin-top: 7;
margin-bottom: 7;
}

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

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

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


ВНИМАНИЕ!

Если Вас интересует более качественное обучение техническим навыкам ведения бизнеса в сети, то Вам наверняка понравится моя новая 36-ти часовая коллекция из 17 видеокурсов в формате flash- "Все Технические Моменты Онлайн Бизнеса в Видеоформате", которая позволит Вам быстро и легко овладеть всеми техническими моментами ведения бизнеса в сети, через наглядные примеры с аудиокомментариями.

В коллекцию вошли следующие курсы:

Создание сайта с нуля (18 уроков - 4 часа 40 минут)

Язык HTML (12 уроков - 3 часа 46 минут)

CSS - расширение возможностей HTML (11 уроков - 2 часа 12 минут)

Установка сервера (4 урока - 51 минута 48 секунд)

Macromedia Dreamweaver (20 уроков - 5 часов 0 минут)

Adobe Photoshop (16 уроков - 5 часов 18 минут)

"Graphic Collection" (6 уроков - 1 час 14 минут)

Создание электронных книг (7 уроков - 1 час 4 минуты)

Создание уроков в Camtasia Studio (7 уроков - 1 час 36 минут)

Создание всплывающих окон (3 урока - 37 минут 31 секунда)

Работа с флэшем "Flash Collection" (7 уроков - 2 часа 30 минут)

Mind Manager (4 урока - 1 час 22 минуты)

Установка форумов на Ваш сайт (3 урока - 25 минут 29 секунд)

Установке CMS (движков) (3 урока - 40 минут 41 секунда)

Snag It - работа со скриншотами (7 уроков - 1 час 48 минут)

"Navigation Collection" (6 уроков - 1 час 24 минуты)

Бонусный видеокурс (7 уроков - 2 часа 26 минут)

(!) - Все программы, которые нужны для прохождения курсов будут на Вашем диске.

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

Здесь Вы не найдете туманной информации о том "что делать", Вы найдете только то, что отвечает на вопрос "как делать?".

Такое меню Вы увидите, когда вставите DVD (CD) диск в свой привод:

 

Узнать Подробнее Прямо Сейчас!

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

На данную 36-ти часовую коллекцию видеокурсов было получено уже более 40 положительных отзывов, с которыми Вы также сможете ознакомиться на официальном минисайте.