Подписаться на обновления блога?

Да

Нет

Картинка 3D коробки

Узнать больше

895

Вся правда о заработке на блогах

Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Картинка 3D коробки

    Узнать больше

    895

    Вся правда о заработке на блогах

    Этот БЕСПЛАТНЫЙ обучающий курс для тех, кто интересуется заработком на блоге.

    Данный материал, основанный на опыте известного блогера Александра Борисова, поможет понять, как можно зарабатывать на блоге действительно реальные деньги и как правильно и эффективно монетизировать его.

  • Узнать больше

    899

    Как заработать в интернете продавая информацию

    Этот БЕСПЛАТНЫЙ обучающий курс по заработку в интернете для тех, кто хочет работать, используя свои знания и опыт.

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

  • Узнать больше

    890

    Как заработать чайнику?

    Многие задаются вопросом, как зарабатывать в интернете? Как начать работать на себя, а не на дядю?

    В БЕСПЛАТНОМ видеокурсе "Как заработать чайнику?", вы найдете много ответов на эти вопросы, которые получите от успешного практика в этой области.

  • Узнать больше

    903

    Создать сайт за 1 час!

    Хорошо известно, что для того, чтобы успешно работать в интернете необходим свой интернет-ресурс.

    Из БЕСПЛАТНОГО видеокурса "Как создать сайт за 1 час" вы узнаете, как можно достаточно быстро сделать бесплатный сайт несложным способом с нуля.

  • Узнать больше

    904

    Как начать зарабатывать на партнерских программах

    Работа на партнерских программах является одной из самых популярных видов заработка.

    БЕСПЛАТНЙ видеокурс "Как начать зарабатывать на партнерских программах" поможет вам освоить этот интересный и эффективный способ работы в интернете.

  • Узнать больше

    905

    ИНФОБИЗНЕС по модели Евгения Попова

    Этот БЕСПЛАТНЫЙ обучающий курс предназначен для тех, кто хочет познакомиться с одним из лучших видов заработка в интернете.

    В данном материале на основе своего опыта автор расскажет каким образом следует строить этот бизнес.

  • Узнать больше

    922

    HTML базовый курс

    БЕСПЛАТНЫЙ обучающий курс предназначен тем, кто делает первые шаги в сайтостроении.

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

  • Узнать больше

    924

    CSS базовый курс

    Этот БЕСПЛАТНЫЙ обучающий курс поможет разобраться в вопросах сайтостроения при создании своего сайта.

    В данном видеокурсе подробно и очень доступно даются основы языка CSS, обеспечивающего управление внешним видом веб-страниц.

  • Узнать больше

    926

    Домен и хостинг

    В этом БЕСПЛАТНОМ обучающем курсе рассказывается как разместить в сети свой вновь созданный интернет-ресурс.

    В видеокурсе пошагово разъясняется как купить домен, купить хостинг, загрузить сайт на хостинг и выполнить все необходимые настройки для его правильной работы.

  • Узнать больше

    927

    Фотошоп для начинающих (бесплатная версия)

    Этот БЕСПЛАТНЫЙ обучающий курс будет полезен тем, хочет освоить работу с графическим редактором "Фотошоп".

    В видеокурсе на конкретном примере показывается как создаются изображения и какие при этом используются инструменты.

  • Узнать больше

    929

    Видеосамоучитель GIMP

    Данный видеокурс поможет освоить работу с дизайном сайта при использовании БЕСПЛАТНОГО графического редактора GIMP.

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

Бесплатные видеокурсы!

Хотите узнать как зарабатывать в интернете и как бесплатно сделать сайт для своей работы, ничего не потратив на обучение?

Здесь Вы можете познакомиться с проверенными способами работы в интернете в БЕСПЛАТНЫХ обучающих курсах по заработку и сайтостроению в разделе Бесплатные Сборника видеокурсов.

Вы здесь: Главная → Как сделать сайт → Контент → Оформляем стилизованные нумерованные и маркированные списки

Знак папки 2Текущее состояние создаваемого сайта

Свернуть

Знак папки 1 Все статьи cборника "Сделай сайт своими руками с нуля бесплатно"


Автор: / Дата:

Оформляем стилизованные нумерованные и маркированные списки

Здравствуйте уважаемый посетитель!

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

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

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

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

Содержание


  • Формируем стандартные нумерованные списки
  • Оформляем нумерованные списки с помощью автоматического счета и нумерации
  • Формируем стандартные маркированные списки
  • Стилизуем маркированные списки с использованием спецсимволов
  • Исходные файлы сайта

Формируем стандартные нумерованные списки


Для того, чтобы начать оформлять нумерованный (упорядоченный) список, с начала необходимо его сформировать.

Поэтому, в первую очередь сделаем его разметку. Обычно для этого используется элемент <ol>, в котором его содержимое размещается непосредственно в тегах <li>.

Ниже показан HTML-код нумерованного списка, который вполне возможно использовать во втором разделе текста оформляемой статьи. При этом, для того, чтобы не загромождать статью ненужным тестом, содержимое элементов текстовых абзацев <p> здесь приведено в сокращенном виде (полное содержание представленного фрагмента статьи можно посмотреть в прилагаемых дополнительных материалах в файле "main.php" каталога "articles").

  1. <ol class="list-number">

  2. <li>

  3. <p>После угона ворам придется...</p>

  4. <p>...</p>

  5. <p>Какой же вор захочет выбрасывать...</p>

  6. </li>

  7. <li>

  8. <p>В случае угона автомобиля...</p>

  9. </li>

  10. <li>

  11. <p>После кражи такого автомобиля...</p>

  12. <p>Потому, естественно, возникает вопрос...</p>

  13. </li>

  14. </ol>

Рис.1 Разметка нумерованного списка;

Как видно, здесь для унификации нумерованного списка элементу <ol> присвоен класс "list-number". Элементами же его являются теги <li>, в которых содержимое пунктов располагается в текстовых абзацах <p>.

Для того, чтобы посмотреть как выглядит стандартный нумерованный список, назначим некоторые свойства CSS, выровняв необходимые отступы его элементов <li> и вложенных в них абзацев <p>.

  1. .list-number {

  2. margin-bottom: .25em;

  3. }

  4. .list-number li {

  5. margin: .25em 0 0 1.75em;

  6. }

  7. .list-number li p {

  8. text-indent: 0;

  9. }

Рис.2 CSS-код обычного нумерованного списка

После выполненных дополнений можно посмотреть как будет выглядеть сформированный во втором разделе данный фрагмент статьи.

Для увеличения / уменьшения размера изображения кликните по картинке
Обычный нумерованный список

Рис.3 Скриншот обычного нумерованного списка

Как видно, идентификаторы по умолчанию имеют вид обычных арабских чисел. При этом, стандартные свойства CSS позволяют изменять их тип, на такие варианты, как:

  • арабские числа (1, 2, 3,...);
  • арабские числа с нулем для цифр меньше десяти (01, 02, 03,...);
  • заглавные латинские буквы (A, B, C,...);
  • строчные латинские буквы (a, b, c,...);
  • заглавные римские числа (I, II, III,...);
  • римские числа в нижнем регистре (i, ii, iii,...);
  • и.т.д.

Что касается остальных возможностей оформления нумерованных списков, то они в основном сводятся к одновременному изменению стандартных свойств элементов <li> и их идентификаторов. Что позволяет изменять такие общие параметры, как размер шрифта, цвет, фон и отступы.

Но, не всегда этого бывает достаточно. Часто возникает желание привнести в оформление контента какие-нибудь уникальные особенности. Вот такой, несколько своеобразный вариант стилизации мы и рассмотрим в следующей части.

Оформляем нумерованные списки с помощью автоматического счета и нумерации


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

И делается это с помощью назначения соответствующих свойств CSS без необходимости каких-либо изменений в разметке. Что довольно удобно, в отличие от тех способов, когда для вновь формируемых идентификаторов используются дополнительные элементы HTML.

Ну, а теперь посмотрим, как практически это можно сделать.

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

  • цвет чисел, соответствующий цвету подзаголовков разделов статьи - заголовков второго уровня <h1>;
  • форма фона в виде небольших округленных квадратов;
  • цвет фона, соответствующий фону области <body>;
  • оформление фона тенью, наподобие той, которая используется в таких элементах дизайна, как блок ротатора, панель пользователя, панель поиска;

Исходя из этого и выполним назначение необходимых свойств CSS. При этом тип идентификаторов оставим по умолчанию - арабские числа (1, 2, 3,...).

И в первую очередь удалим стандартные идентификаторы используя свойство list-number для элемента <ol> с классом "list-number", как показано в следующей таблице (как и ранее, добавленные или измененные строки обозначены светлым фоном, существующие - более темным).

  1. .list-number {

  2. list-style-type: none;

  3. margin-bottom: .25em;

  4. }

Рис.4 CSS-код удаление стандартных элементов нумерации

Для увеличения / уменьшения размера изображения кликните по картинке
Нумерованный список без стандартных элементов нумерации

Рис.5 Скриншот нумерованного списка без стандартных элементов нумерации

На скриншоте видно, что теперь в списке отсутствуют порядковые номера его пунктов.

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

  • counter-reset - назначает переменную, которая будет использована для хранения и установки начального значения счётчика отображаемого элемента (по умолчанию начальное значение равно 0);
  • counter-increment - увеличивает значения счётчика, созданного с помощью свойства counter-reset на величину приращений (по умолчанию значение приращения счётчика равно 1);
  • content - отображает новое генерируемое содержимое в HTML-странице до или после используемого элемента в зависимости от типа применяемого псевдоэлемента - ::before или ::after, соответственно.

Ниже показан CSS-код нумерованного списка с дополнениями, при которых на место удаленных стандартных идентификаторов, создаются новые элементов нумерации.

  1. .list-number {

  2. list-style-type: none;

  3. margin-bottom: .25em;

  4. counter-reset: number;

  5. }

  6. .list-number li {

  7. margin: .25em 0 0 1.75em;

  8. position: relative;

  9. }

  10. .list-number li::before {

  11. counter-increment: number;

  12. content: counter(number);

  13. position: absolute; left: -1.375em; top: .1875em;

  14. }

Рис.6 CSS-код создания новых элементов нумерации

Помимо ранее упомянутых свойств генерации и отображения элементов для установленной переменной счетчика number (поз.4,11,12), здесь также следует обратить внимание на использование относительного позиционирования для элемента .list-number li (поз.8) и абсолютного - для .list-number li ::before (поз.13).

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание новых элементов нумерации

Рис.7 Скриншот списка со вновь созданными элементами нумерации

Как видно, теперь отображаются те же самые идентификаторы в виде арабских чисел, как и ранее, при стандартном использовании нумерованного списка, изображенного на рис.1.

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

Соответствующий CSS-код с дополнениями и изменениями, который позволяет придать нашему нумерованному списку некоторые уникальные свойства представлен в следующей таблице стилей.

Следует обратить внимание на то, что в отличие от ранее рассматриваемых таблиц CSS, используемая здесь нумерация строк окончательного варианта использована в соответствии с общей таблицей CSS, размещенной в файле "main.css", который можно найти в дополнительных материалах.

  1. .list-number {

  2. list-style-type: none;

  3. margin-bottom: .25em;

  4. counter-reset: number;

  5. }

  6. .list-number li {

  7. margin: .25em 0 0 1.75em;

  8. position: relative;

  9. }

  10. .list-number li::before {

  11. counter-increment: number;

  12. content: counter(number);

  13. position: absolute; left: -1.9375em; top: .3125em;

  14. font-size: 0.875em;

  15. color: #bd072e;

  16. background: #eee;

  17. width: 1.25em;

  18. text-align: center;

  19. border-radius: 0.25em;

  20. box-shadow: -.0625em -.0625em .3125em 0 #8b8e8d inset;

  21. }

Рис.8 CSS-код стилизованного нумерованного списка

Как видно, для оформления вновь созданных идентификаторов, формируемых переменной счетчика number, здесь использованы обычные свойства CSS. Такие, как размер шрифта font-size (поз.366), цвет color (поз.367), фон background (поз.368), ширина width (поз.369), выравнивание text-align (поз.370), свойство скругления углов border-radius (поз.371) и тени box-shadow (поз.372).

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

И последнее, что можно отметить по данному фрагменту, это то, что в параметры абсолютного позиционирования псевдоэлемента ::before внесены некоторые изменения, касающихся свойств left и top (поз.365). Это обусловлено тем, что теперь в качестве идентификаторов используются не просто числа, а оформленные графические элементы в виде небольших округленных квадратов, что и потребовало внесение коррекции в их позиционирование.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Стилизованный нумерованный список

Рис.9 Скриншот стилизованного нумерованного списка

Таким образом, мы выполнили задуманное и, в некотором виде приблизили стиль нумерованного списка к дизайну сайта. Что, несомненно, предоставляет дополнительную возможность придать уникальную особенность внешнему виду размещаемого контента.

Если сравнить с тем, что было до этих преобразований, при стандартном исполнении (рис.1), то можно отметить, что теперь внешний вид нумерованного списка объективно стал куда более интересным, чем ранее.

Формируем стандартные маркированные списки


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

Ниже показан фрагмент HTML-кода маркированного списка, сформированного в третьем разделе статьи. На котором и будем в дальнейшем рассматривать практическое использование способа стилизации с применением спецсимволов в качестве маркеров.

Причем, как и в первом случае, для упрощения, содержимое элементов списка здесь приведено в сокращенном виде.

  1. <ul class="list-custom">

  2. <li>если угон все же произошел...</li>

  3. <li>дополнительная маркировка легкосъемных...</li>

  4. <li>многие страховые компании...</li>

  5. <li>немаловажным фактом является...</li>

  6. </ol>

Рис.10 Разметка маркированного списка;

Как видно, структура HTML-кода маркированного списка полностью повторяет рассмотренный выше нумерованный, за исключением наименования самого тега - вместо ol теперь используется ul.

Также можно обратить внимание на то, что для унификации маркированных списков, здесь в качестве селектора используется класс со значением "list-custom" (в нумерованных списках значение этого атрибута мы определили, как "list-number").

Теперь, для того, чтобы посмотреть, как будет выглядеть маркированный список по умолчанию, с помощью свойств CSS выровним его элементы li.

  1. .list-custom li {

  2. margin: .25em 0 0 2.25em;

  3. }

Рис.11 CSS-код выравнивания стандартного маркированного списка

А затем, снова обновим главную страницу. Внешний вид полученного стандартного маркированного списка показан на следующем скриншоте.

Для увеличения / уменьшения размера изображения кликните по картинке
Стандартный маркированный список

Рис.12 Скриншот стандартного маркированного списка

Как видно, в данном случае, по умолчанию в качестве идентификаторов используются маркеры в виде точки.

Можно, конечно, использовать и другие возможные варианты стандартных маркеров в виде незакрашенного кружка или квадрата. Но гораздо интересней использовать для этого какой-нибудь другой подходящий символ. Да еще, если постараться стилизовать его под дизайн сайта.

Вот этим мы и займемся в следующей части.

Стилизуем маркированные списки с использованием спецсимволов


Как и в предыдущем случае, прежде, чем приступать к оформлению, с начала определим основные свойства, которые мы бы хотели придать маркированному списку. И, наверное, логично будет взять за основу вид идентификаторов, которые были получены ранее для нумерованного списка.

Таким образом попробуем оформить маркеры исходя из следующих параметров, практически повторяющихся с предыдущим вариантом:

  • цвет маркеров, соответствующий цвету подзаголовков разделов статьи - заголовков второго уровня <h1>;
  • форма фона в виде небольших округленных квадратов;
  • цвет фона, соответствующий фону области <body>;
  • оформление фона тенью, наподобие той, которая используется в таких элементах дизайна, как блок ротатора, панель пользователя, панель поиска;

Что же касается выбора символа, то конечно, существует достаточно большое количество вариантов. В нашем случае, остановимся на символе в виде , который еще называют "Галочка обычная" или просто "Галочка". По крайней мере, на мой взгляд, это будет вполне приемлемо.

Но для того, чтобы с помощью используемого здесь свойства CSS content этот символ отобразить на HTML странице, следует иметь его шестнадцатеричный код в стандарте "Unicode".

Найти шестнадцатеричный код подходящего символа совсем не сложно. Для этого существует большое количество соответствующих сервисов. Например, можно воспользоваться достаточно полной таблицей всевозможных символов на специальном интернет-ресурсе unicode-table.com.

скриншот 14

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

Для увеличения / уменьшения размера изображения кликните по картинке
Определение шестнадцатеричного кода выбранного символа

Рис.13 Определение шестнадцатеричного кода выбранного символа

Как видно, для того, чтобы получить шестнадцатеричный код символа, необходимо взять с левой стороны 3 первых разряда кода и добавить последний разряд, который определяется в верхней части таблицы. В нашем случае для выбранного символа шестнадцатеричный код равен 2713.

Можно воспользоваться и другими сервисами для поиска подходящих символов. Например belarusweb.net, где также имеется достаточно большое количество интересных символов с различными смайликами и другими графическими фигурами. В общем, с поиском символов для маркеров затруднений возникнуть не должно.

скриншот 15

Таким образом шестнадцатеричный код символа мы определили и теперь можно перейти к непосредственному оформлению.

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

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

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

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

  1. .list-custom {

  2. list-style-type: none;

  3. }

  4. .list-custom li {

  5. margin: .25em 0 0 2.25em;

  6. position: relative;

  7. }

  8. .list-custom li::before {

  9. content: '\2713';

  10. position: absolute; left: -1.9375em; top: .375em;

  11. font-size: 0.6875em;

  12. color: #bd072e;

  13. background: #eee;

  14. width: .5em;

  15. font-weight: bold;

  16. padding: 0 .5em 0 .1875em;

  17. border-radius: 0.25em;

  18. box-shadow: -.0625em -.0625em .3125em 0 #8b8e8d inset;

  19. }

Рис.14 CSS-код стилизованного маркированного списка

Как видно, здесь свойству content присвоено значение 2713, соответствущее выбранному нами символу . Остальные же все используемые в этом фрагменте свойства стилей CSS ранее подробно рассматривались и дополнительного пояснения, очевидно, здесь не требуют.

А теперь, чтобы проверить результат наших преобразований, снова обновим страницу и посмотрим, как изменился наш маркированный список.

Для увеличения / уменьшения размера изображения кликните по картинке
Стилизованный маркированный список

Рис.15 Скриншот стилизованного маркированного списка

Как видно, стилизованный маркированный список стал смотреться несколько интересней с использованием уникального оформления маркеров.

Таким образом мы оформили нумерованный и маркированный списки придав некоторую уникальность внешнему виду их идентификаторов при достаточно хорошем сочетании с существующим дизайном сайта.

И что немаловажно, теперь несложно будет использовать данный стиль оформления списков и в других статьях сайта. Для чего достаточно будет при формировании контента присваивать элементам ol или ul соответствующие классы: .list-number - для нумерованных и .list-custom - для маркированных списков.

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

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

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать бесплатно в дополнительных материалах:

С уважением, Николай Гришин

Читать дальше


Подписка


Здесь вы можете подписаться на получение уведомлений о выходе новых статей блога.

Необходимо отметить, что данные об e-mail надежно защищены (работа сайта обеспечивается только через защищенные соединения по протоколу SSL) и не предназначены для использования третьими лицами.

Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учитывать в дальнейшем мнение посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments

Социальные сети


Если Вам понравилась эта статья и считаете, что она будет полезна и для других, Вы можете поделиться об этом с друзьями в социальных сетях.

Другие статьи из рубрики "Как сделать сайт"


Показать больше


  • Google+ Опубликованные статьи можно также смотреть в подборках Google+