<MyRusakov.ru />

Программирование на C++ с Нуля до Гуру

Программирование на C++ с Нуля до Гуру

Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.

Для закрепления материала из уроков к ним идёт множество упражнений.

Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.

Также вместе с курсов Вы получаете Бонус "Программирование на C++ в Unreal Engine", в котором Вы научитесь создавать игры на C++ с использованием этого движка.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Зачем Вы изучаете программирование/создание сайтов?

Как изменить маркер списка

Как изменить маркер списка

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

Давайте рассмотрим на примере, что я имею ввиду.

HTML разметка базового маркированного списка:

<ul>
  <li>Анжелика</li>
  <li>Анастасия</li>
  <li>Анатолий</li>
  <li>Александр</li>
</ul>

На странице, вы увидите следующее.

Как изменить маркер списка.

Как верстают меню навигации без точек? Просто в стилях прописывают следующую строчку.

ul {
  list-style: none;
}

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

Меняем цвет маркера списка (1-ый способ)

Удалим дефолтные черные точки.

ul {
  list-style: none;
}

А взамен, поставим другие точки, поставив псевдоэлемент before перед всеми пунктами списка. Вместо точек, добавим значение свойства content "\2022" , это CSS код точки, взятый из таблицы Юникода. Дальше к этим точкам, можно применять нужные стили.

ul li::before {
  content: "\2022"; /* юникод точки */
  color: orange; /* Менять цвет */
  font-weight: bold; /* Менять жирность */
  display: inline-block; /* Расстояние между точкой и текстом */
  width: 1em; /* Задать значение расстояния */
}

Пример с заменой цвета маркеров списка

Как изменить маркер списка.

Меняем цвет маркера списка (2-ой способ)

Все спецсимволы Юникода имеют альтернативный HTML-код и могут вставляться напрямую в HTML разметку, между тегами span. Для разнообразия, мы используем в качестве маркера спецсимвол – ☑ галочка в квадрате.

<ul>
  <li><span>&#9745;</span>Анжелика</li>
  <li><span>&#9745;</span>Анастасия</li>
  <li><span>&#9745;</span>Анатолий</li>
  <li><span>&#9745;</span>Александр</li>
</ul>

CSS-код

ul {
  list-style: none;
}


span {
  color: cyan;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  font-size: 20px;
}

Как изменить маркер списка.

Второй способ изменения маркера списка, мне понравился больше. Он позволяет увеличить размер маркера (font-size), не задевая межстрочный интервал, чего нельзя сказать о первом способе.

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

Как изменить маркер списка.

Символы вместо иконок

На сегодняшний день, самый легкий способ вставки иконки-гамбургера в меню сайта – это вставка символа Юникода Trigram for Heaven - ☰.

<a href="#">&#9776;</a>

Если вы нашли в таблице Юникода, нужный символ, то для вставки его на сайт, не нужно подключать библиотеку Font Awesome.

Вместо маркера картинка

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

ul {
  list-style: none;
}
ul li {
  background: url(images/icon_star.gif) no-repeat 0 5px;
}

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

Альтернативный способ:

ul {
  list-style-image: url(images/icon_star.gif);
}

Для внедрения символов Юникода, кодировка страницы должна быть обязательно UTF-8.

В HTML файле:

<meta charset="utf-8"/>

В отдельном CSS файле:

@charset 'utf-8';

Если вы только присматриваетесь к профессии верстальщика, то наиболее оптимальным решением будет, начинать своё обучение с верстки лендингов, начните с этого видеокурса "О создании лендинга под ключ".

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

master284 master284 28.11.2018 11:10:20

Спасибо Михаилу за существенную подсказку верстальщику в оформлении списков. Это присутствует в каждом сайте и странице. Вчера отдал заказчику сайт визитку http://lomtop.kh.ua/ ,где и применял советы Михаила. В своё время я приобретал видео курсы М.Русакова и сейчас делаю сайты визитки на заказ. При этом мне уже за 70 лет. А я учусь.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.