Rivalry2

HTML Diff

8 added 9 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#База знаний</a>

2 <ul><li>2 мар 2021</li>

3 <li>0</li>

4 </ul>Три примера вёрстки, которые встречаются часто и пригодятся наверняка.

5 Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик

6 При разработке сайта верстальщик должен отличатьконтентные(информативные) изображения от декоративных.

7 Контентные изображениясвязаны со структурой и смысловым наполнением страниц. Они содержательны, поэтому их вставляем в разметку.

8 Декоративные изображения - это элементы оформления: разделители, маркеры, значки, фоны и так далее. Они не несут полезной информации для пользователя, поэтому их задаём средствами CSS. Так мы избавляем HTML-документ от всего лишнего.

9 Пример явно декоративных изображений - пиктограммы ("иконки") и фоновые картинки. Научимся их верстать с помощью CSS-свойства background.

10 - Почти на любом сайте есть блок со ссылками на Facebook*, "ВКонтакте", Instagram* и другие соцсети:

10 + Почти на любом сайте есть блок со ссылками на соцсети и медиа - "ВКонтакте", "Одноклассники", YouTube и другие:

11 - Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, - нужно использовать CSS.

11 + Изображение: Skillbox MediaПоскольку это иконки, а текста (контентной составляющей) мы рядом не видим, - нужно использовать CSS.

12 Здесь есть пара нюансов:

13 <ul><li>Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).</li>

14 <li>Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка - строчный элемент (его размер не изменить с помощью свойств width и height).</li>

15 </ul>Обойдём эти ограничения.

16 Сперва напишем простую разметку - список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.

17 Начнём, конечно, с HTML-кода:

18 - <ul class="social"> <li class="social__item"> <a href="#" class="social__link social__link--vk" aria-label="Мы во ВКонтакте"></a> </li> <li class="social__item"> <a href="#" class="social__link social__link--fb" aria-label="Мы в Фейсбуке*"></a> </li> <li class="social__item"> <a href="#" class="social__link social__link--insta" aria-label="Мы в Инстаграме*"></a> </li> </ul>Далее - CSS:

18 + <ul class="social"> <li class="social__item"> <a href="#" class="social__link social__link--vk" aria-label="Мы во ВКонтакте"></a> </li> <li class="social__item"> <a href="#" class="social__link social__link--ok" aria-label="Мы в Одноклассниках"></a> </li> <li class="social__item"> <a href="#" class="social__link social__link--youtube" aria-label="Наш канал на YouTube"></a> </li> </ul>Далее - CSS:

19 - .social__link { display: inline-block; width: 30px; height: 30px; background-position: center; background-size: cover; background-repeat: no-repeat; } .social__link--vk { background-image: url("../img/vk.svg"); } .social__link--fb { background-image: url("../img/fb.svg"); } .social__link--insta { background-image: url("../img/instagram*.svg"); }<ul></ul><ul><li>Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту - и это уже сработает.</li>

19 + .social__link { display: inline-block; width: 30px; height: 30px; background-position: center; background-size: cover; background-repeat: no-repeat; } .social__link--vk { background-image: url("../img/vk.svg"); } .social__link--ok { background-image: url("../img/ok.svg"); } .social__link--youtube { background-image: url("../img/youtube.svg"); }<ul></ul><ul><li>Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту - и это уже сработает.</li>

20 <li>Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.</li>

21 <li>А вот фоновые изображения у нас разные - их мы задаём в разных классах.</li>

22 </ul>Вот и готов наш универсальный компонент. Его легко обновить и использовать повторно, когда нам понадобятся другие соцсети.

23 Такие иконки с фоном встречаются в контактах на сайте. Мы вешаем ссылку на email, а для наглядности добавляем пиктограмму.

24 - На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.

24 + Изображение: Skillbox MediaНа скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.

25 Сперва ничего особенного - обычная ссылка:

26 <a href="mailto:mail@yahoo.com" class="email-link">mail@yahoo.com</a>Вся магия в CSS:

27 .email-link { background-image: url("../img/mail.svg"); background-position: left center; background-size: 20px 20px; background-repeat: no-repeat; }<ul><li>Сначала задали путь до изображения.</li>

28 <li>Потом установили начальное положение фона (background-position) в left center - ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).</li>

29 <li>Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.Дело в том, что иконка может оказаться больше блока, в котором её захотят показать. Тогда она некрасиво обрежется по бокам. Чтобы этого не произошло - указываем размеры, в которые иконка должна вписаться.

30 </li>

31 </ul><ul><li>И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит - зависит от размеров картинки и HTML-элемента, где она задана фоном).</li>

32 </ul>Что же мы получили:

33 - Не совсем то, чего ожидали.Давайте разбираться.

33 + Изображение: Skillbox MediaНе совсем то, чего ожидали.Давайте разбираться.

34 Наш "конвертик" стал фоновым изображением для блока, который занимает ссылка. Текст ссылки - это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

35 Значит, нужно отодвинуть это самое содержимое от левойграницы блока (помните, мы прижали "конвертик" именно к левомукраю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) - тогда увидеть наш фон уже ничто не помешает.

36 Делается это с помощью свойства padding (внутренний отступ).

37 Добавим в код такой отступслева:

38 .email-link { padding-left: 30px; background-image: url("../img/mail.svg"); background-position: left center; background-size: 20px 20px; background-repeat: no-repeat; }Вот теперь всё вышло как надо:

39 - На заметку:этот приём также подходит для иконок справа, сверху или снизу от текста. Например, нужна иконка справа - меняйте отступ слева на отступ справа, и позицию фона задайте тоже справа.

39 + Изображение: Skillbox MediaНа заметку:этот приём также подходит для иконок справа, сверху или снизу от текста. Например, нужна иконка справа - меняйте отступ слева на отступ справа, и позицию фона задайте тоже справа.

40 Подобные блоки привлекают внимание. Фоном идёт картинка, а поверх неё текст. Давайте разбираться, как такое сделать.

41 - Взглянув на этот макет, можно предположить, что тут достаточно задать высоту и ширину, расположить фоновое изображение - и всё.

41 + Скриншот: Skillbox MediaВзглянув на этот макет, можно предположить, что тут достаточно задать высоту и ширину, расположить фоновое изображение - и всё.

42 Однако мы не всегда знаем заранее, сколько контента будет внутри блока - не изменят ли потом его содержимое. Могут поменять заголовок, сделать его больше на две-три строки - и тогда всё сломается. Поэтому фон нужно делать адаптивным. Итак, к коду.

43 Создаём простую HTML-разметку:

44 <article class="card"> <h3 class="card__title">Мальдивские острова</h3> от 55 000 р <a href="tel:+74932200080" class="card__link">+7 (4932) 2000-80</a> </article>Главное у нас снова в CSS:

45 .card { padding: 30px; background-image: url("../img/content-bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; }<ul><li>Чтобы даже при увеличении текста ничего не сломалось - применяем внутренний отступ (padding). Таким образом уходим от фиксированных размеров: контент можно менять, при этом блок и его фон будут подстраиваться.</li>

46 <li>Устанавливаем background-repeat в no-repeat. По умолчанию применяется repeat, но с ним фоновая картинка повторяется, пока не заполнит собой блок, а нам такого не нужно.</li>

47 <li>Задаём background-position: center - выравниваем картинку по центру контейнера (как по вертикали, так и по горизонтали).</li>

48 <li>А теперь самое важное - масштабируем фон. Задаём свойству background-size значением cover. Это и позволит нашей картинке подстроиться под размеры блока (её ширина или высота будет равняться ширине или высоте блока, а пропорции сохранятся).</li>

49 </ul>Вот мы и сделали фон адаптивным.

50 - * Решением суда запрещена "деятельность компании Meta Platforms Inc. по реализации продуктов - социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности.

51 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>

50 <a>Бесплатный курс по Python ➞Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>