Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


Модернизируйте ваши упорядоченные списки

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

Просмотреть примеры

Загрузить файл HTML

Обзор

Фактически, все, что нам нужно будет сделать - это стилизовать элемент ol под шрифт Georgia, а затем сбросить элемент p, заложенный в ol, на шрифт Arial.

1. Исходный код HTML

Сделайте упорядоченный список. Не забудьте поместить ваш текст в тег <p>


<ol>
  <li>
    <p>This is line one</p>
  </li>
  <li>
    <p>Here is line two</p>
  </li>
  <li>
    <p>And last line</p>
  </li>
</ol>

Вот как отображается упорядоченный список по умолчанию:

2. Элемент ol

Стилизуйте элемент ol:


ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}

Список станет вот таким:

3. Элемент ol p

Теперь стилизуйте элемент ol p:


ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

Ваш список должен выглядеть вот так:

Посмотрите мой демо файл, чтобы увидеть еще примеры.


Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»


Оцените, пожалуйста, эту статью:

  • Currently 1.38/5

Рейтинг: 1.4/5 (голосов: 8)

  Опубликовано: 07 мая 2009 | Просмотров: 7779 | Страница для печати  

Читать комментарии [15] на форуме.

Оставить комментарий
Ваше имя:

Проверка на человечность:

Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.


  О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте