где применять и как сделать самому
Доброго времени суток всем, кто прямо сейчас читает мой блог! Каждый из вас хоть раз, но встречался с такими сайтами, на которых при масштабировании фоновое изображение или другие важные графические объекты «прятались» за границами экрана.
В некоторых случаях это критично для пользователя, ведь полезная информация просто исчезает. Именно поэтому в текущей статье я расскажу, как сделать резиновый фон css — средствами, раскрою маленькие хитрости и конечно же приведу контрольные примеры. Думаю, пришло время приступать к обучению!
Что такое резиновый фон и как им пользоваться?
Как вы уже наверняка догадались, речь пойдет именно о фоновых изображениях и об их растягивании и одновременном масштабировании на весь экран вне зависимости от размера последнего. По сути это и называется резиновым фоном или резиновой картинкой на заднем фоне.
Как же его можно заприметить на веб-сервисах? Очень просто. При увеличении или уменьшении окна браузера внедренные объекты (текст, рисунки, кнопки и т.
д.) будут сдвигаться, подстраиваясь под размер вкладки.
В этот же момент резиновое изображение почти не будет видоизменяться. А если масштабируемое окно сохранит пропорции, то фон останется идентичен и только размер изображения будет колебаться.
Каким образом создается резиновый фон?
Существует несколько способов «превращения» обычного изображения в растягиваемое. Все они используют одно и то же свойство. Отличие состоит только в том, что второй способ, о котором я расскажу, появился благодаря css3.
Главные инструменты, которые используются в обеих вариантах, это background-size и background.
Первое свойство управляет размером изображения, а второе задает сам путь к картинке. Также через background можно указать повторяемость и пролистывание вместе с контентом.
Итак, начнем с первого и более старого варианта.
Растягиваемость картинки устанавливается при помощи процентов.
Так, строка background-size: 100% растянет изображение на все окно браузера вне зависимости от его размера.
В некоторых случаях можно увидеть и такой код:
background-size: 100% auto.
Атрибут auto отвечает за вертикальное размещение картинки, которое должно автоматически подстраиваться под высоту вкладки.
Для наглядности разберем пример. Для сайта был сверстан блок с текстом и задано резиновое изображение.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваемый фон</title>
<style>
body {
background: url(https://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed;
-o-background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
text-align: center;
color: #8B2500;
}
div {
background: #FFFACD;
border: 5px double #FFA500;
width: 86%;
margin: 4% 4% 4% 4%;
padding: 35px;
}
h2 {
color: #FFA500;
text-shadow: 2px 2px 1px #8B4513;
}
</style>
</head>
<body>
<div>
<h2>Создайте солнечное настроение вместе с туристической компанией "Подсолнух"</h2>
<p>Мы предлагаем туры в солнечную Мексику, загадочный Египет, великолепную Францию. |
Обратите внимание на такие моменты:
- background: url (http://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed. В этой строчке кода я описал изображение как фиксированное (оно не будет скролироваться вместе с содержимым веб-страницы) и не повторяющееся.
- Что касается слов center center, то они указывают, какая именно часть изображения всегда будет видна вне зависимости от масштаба. Первый параметр отвечает за левый и правый край рисунка, а второй – верхний и нижний край. Таким образом можно закрепить изображение так: left bottom.
- В этом случае указанные границы всегда будут видны пользователю и само фоновое изображение сместиться. Также можно задавать данные значения через пикселы. Например, вместо первого параметра пишем 150px и тогда изображение сдвинется вправо на указанное число единиц.
- margin: 4% 4% 4% 4%. Такой способ указания отступов позволит даже в маленьком окне браузера сохранить расстояние между краями вкладки и блоком с текстом.
Выбирайте картинки только большого размера и хорошего качества, чтоб при масштабировании фон не размывался.
Во втором способе создания резинового фона используется ключевое свойство cover, которое появилось в спецификации css3.
Замените у background- size параметры 100% auto на cover и оцените результат.
На этом у меня все. Если вам понравилась публикация, то обязательно подписывайтесь на обновления моего блога, а также делитесь впечатлениями и новыми знаниями с друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 1283 раз
Понравилась статья? Поделись с друзьями:
Этот блог уже читают
читай и ты!
Как сделать фоновое изображение HTML полноэкранным?
Обзор
Часто визуально приятнее и интереснее добавлять изображения на фон определенных частей веб-сайта, чем менять только цвет фона.
В зависимости от доступного места изображение можно оставить в естественном размере, растянуть или сжать. В этой статье описывается, как установить изображение в качестве фона для элемента с помощью свойства background-size в CSS.
Предпосылки
- HTML для структуры нашего изображения.
- CSS для стилизации и адаптивности нашего фонового изображения.
Что мы создаем?
Здесь мы узнаем, как растянуть фоновое изображение так, чтобы оно покрывало всю область просмотра браузера. Для этого будет использоваться свойство CSS background-size, и JavaScript не требуется. Веб-дизайнеры часто растягивают фоновые изображения, чтобы покрыть всю область просмотра браузера, поскольку это выглядит заманчиво для пользователей, посещающих наши веб-сайты. Эту задачу довольно легко выполнить, используя несколько строк CSS в наших проектах. Окончательный результат того, что мы создадим, показан ниже:
Как сделать полноэкранное адаптивное фоновое изображение с помощью CSS
Чтобы сделать наши изображения адаптивными, мы планируем сделать следующее:
1.
Заполнить всю область просмотра свойством background-size Можно установите для свойства CSS background-size значение cover. Используя это значение, браузер автоматически и пропорционально масштабирует ширину и высоту фонового изображения так, чтобы они были либо на
2. Используйте мультимедийные запросы для создания фонового изображения меньшего размера для мобильных устройств
Уменьшенная версия файла фонового изображения будет использоваться для ускорения загрузки страницы на небольших экранах с мультимедийным запросом. Выбор этого параметра необязателен.
В чем преимущества использования фонового изображения меньшего размера на мобильном устройстве? В демо я использовал изображение размером около 5976*35705976*35705976*3570 пикселей.
Благодаря этому размеру мы будем работать на подавляющем большинстве широкоэкранных компьютерных мониторов, доступных в настоящее время.
Однако для этого нам потребуется обслуживать файл размером 1,5 МБ, 1,5 МБ и 1,5 МБ.
Для фоновой фотографии никогда не будет хорошей идеей занимать такой большой объем данных, но это особенно плохо для мобильного Интернета. Кроме того, размер изображения слишком велик на устройствах с маленьким экраном.
Мы можем сделать изображения адаптивными, используя следующий подход:
Вот вся необходимая разметка:
<тело>
...Ваш контент идет сюда...
Мы назначим изображение, которое будет использоваться в качестве фона для элемента body, чтобы изображение всегда покрывало всю область просмотра наших браузеров.
Теперь наше фоновое изображение покрывает всю область просмотра браузера, и мы собираемся назначить изображение элементу body. Тем не менее, этот метод работает с любым элементом на уровне блока (например, с div или формой).
Фоновое изображение всегда будет масштабироваться так, чтобы покрывать весь контейнер блочного уровня, если ширина и высота контейнера плавные.
background-size: обложка;
Вот где происходит волшебство. Всякий раз, когда устанавливается эта пара свойство/значение, браузер масштабирует фоновое изображение, чтобы оно соответствовало ширине и высоте элемента. Здесь мы используем элемент body в качестве примера.
Когда браузер видит фоновое изображение, которое меньше, чем размеры элемента body, он программно увеличивает изображение. Это происходит на экранах высокого разрешения с небольшими фоновыми изображениями.
Хорошо известно, что когда изображения масштабируются выше их естественных размеров, качество изображения ухудшается (происходит пикселизация).
Качество изображения ухудшается, когда изображения масштабируются за пределы их естественных размеров.
Учтите, что при выборе изображения для вашего проекта, поскольку в демонстрации используются фотографии размером 5976∗35705976*35705976∗3570px для больших экранов, пройдет некоторое время, прежде чем возникнут проблемы.
В зависимости от размера фонового изображения браузер может отображать его в виде плиток.
Использование неповторения предотвратит это:
background-repeat: no-repeat;
Мы будем держать наше изображение в центре, чтобы все выглядело красиво:
background-position: center center;
Таким образом, изображение всегда будет центрировано по вертикали и горизонтали.
Следующая проблема возникает, когда высота содержимого больше, чем высота видимого окна просмотра. В этом случае будет полоса прокрутки. Фоновое изображение должно оставаться на месте во время прокрутки вниз. В противном случае изображение либо заканчивается в нижней части фона, либо перемещается, когда пользователь прокручивает страницу вниз (что может сильно отвлекать).
Этого можно добиться, установив для свойства background-attachment фиксированное значение.
фоновое вложение: фиксированное;
Используя краткую нотацию, можно включить все свойства фона, описанные выше:
Например:
background: url(background-photo.
jpg) центральная обложка без повторов исправлено;
Теперь мы получили полностью адаптивное изображение, которое всегда будет покрывать весь фон и выглядеть привлекательно для пользователей, посещающих наш веб-сайт. Код для его достижения показан ниже:
Вывод:
Вывод с использованием медиа-запроса показан ниже:
Если ваше мобильное соединение медленное, вы можете уменьшить исходное изображение с помощью Photoshop или другого программного обеспечения для редактирования изображений.
Одним из основных недостатков использования медиа-запроса является то, что при изменении размера окна браузера, например, с 1200px1200px1200px на 640px640px640px (или наоборот), фоновое изображение на мгновение мерцает во время загрузки.
Фоновое изображение HTML на весь экран без CSS
Для установки фонового изображения HTML на весь экран можно использовать различные методы. В этом примере изображение будет занимать весь экран.
Это можно сделать с помощью CSS или без него. Как вы можете видеть в приведенном ниже примере, когда мы увеличиваем и уменьшаем масштаб, фоновое изображение не меняется, и все это делается с использованием атрибутов HTML без добавления какого-либо CSS.
- Первое свойство, используемое здесь, — это фоновое изображение, которое устанавливает изображение в качестве фона с помощью URL-адреса.
- Background-repeat — это следующий атрибут, используемый для предотвращения повторения нашего изображения.
- Размер фона — один из наиболее важных атрибутов, используемых здесь, поскольку он фиксирует фоновое изображение, чтобы оно не менялось при увеличении и уменьшении масштаба веб-страницы. Покрытие дается как значение.
<голова>Название документа<title> </голова> <body background-image="nature/picture.jpg" background-repeat="no-repeat" background-size="cover"> </тело> </html> </pre></pre><p> <strong> Вывод: </strong></p><h3 level="2"><span class="ez-toc-section" id="i-7"> Заключение </span></h3><ol><li> Свойство <strong> CSS background-size </strong> было использовано для того, чтобы сделать фоновое изображение HTML полноэкранным.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/phonoteka.org/uploads/posts/2021-04/thumbs/1619680277_22-phonoteka_org-p-fon-dlya-khtml-22.jpg' /><noscript><img loading='lazy' src='/800/600/http/phonoteka.org/uploads/posts/2021-04/thumbs/1619680277_22-phonoteka_org-p-fon-dlya-khtml-22.jpg' /></noscript></li><li> Фоновое изображение элемента управляется CSS-свойством background-size. В зависимости от доступного места изображение можно оставить в естественном размере, растянуть или сжать.</li><li> Также можно добавить изображение без использования CSS, используя атрибуты background-image, background-repeat и background-size.</li></ol><h2><span class="ez-toc-section" id="i-8"> Как ускорить фоновые изображения </span></h2><p> Фоновые изображения обычно используются в местах с текстом или контентом сверху. Это может быть слайдер, избранное изображение поста в блоге (как показано ниже) или главное изображение.</p><p> Скорее всего, они загружаются медленно и могут повлиять на взаимодействие с пользователем из-за увеличения параметра Largest Contentful Paint (LCP), если они находятся в указанной выше части.</p><h5><span class="ez-toc-section" id="i-9"> Оглавление </span></h5><ol><li> Почему фоновые изображения работают медленно?<ol><li> Запросы с низким приоритетом</li><li> Тяжелая ленивая загрузка и предварительная загрузка</li></ol></li><li> Как ускорить фоновые изображения?<ol><li> Использовать IMG-тег с объектной подгонкой</li><li> Предварительно загрузить фоновое изображение</li><li> IMG-тег с хаком ‘display: none’</li><li> Добавить адаптивные изображения</li><li> Встроенное фоновое изображение в HTML Медленный?</h3><h4><span class="ez-toc-section" id="i-10"> Запросы с низким приоритетом </span></h4><p> Если изображение находится во внешнем файле CSS, оно будет загружено только после загрузки и анализа файла CSS, а также когда класс CSS фактически используется в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/phonoteka.org/uploads/posts/2022-09/thumbs/1663695137_52-phonoteka-org-p-programmist-fon-vkontakte-64.jpg' /><noscript><img loading='lazy' src='/800/600/http/phonoteka.org/uploads/posts/2022-09/thumbs/1663695137_52-phonoteka-org-p-programmist-fon-vkontakte-64.jpg' /></noscript></p><p> Это может отражаться в вашей основной метрике веб-показателей, такой как <strong> Крупнейшая содержательная отрисовка (LCP) </strong>, если эти фоновые изображения находятся в верхней части.</p><p> Если это тег IMG, изображение загружается мгновенно при анализе HTML.</p><h4><span class="ez-toc-section" id="i-11"> Тяжелая отложенная загрузка и предварительная загрузка </span></h4><p> Теги IMG могут использовать встроенную отложенную загрузку браузера, которая не требует JavaScript.</p><p> Вы по-прежнему можете лениво загружать фоновые изображения, если они находятся в HTML как встроенный стиль. Такие плагины, как FlyingPress, автоматически обнаруживают и загружают их в ленивом режиме.</p><p> Однако, если фоновое изображение находится внутри внешнего CSS-файла или внутреннего, все становится сложнее, поскольку мы не можем понять, есть ли у HTML-элемента фоновое изображение или нет.</p><p> Примечание. Если вы используете FlyingPress, у нас есть вспомогательный класс «<strong> lazy-bg» </strong> для ленивой загрузки фоновых изображений даже внутри файлов CSS.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/radio-sgom.ru/wp-content/uploads/c/6/6/c66f1053983e505fe1a0fd419e82ccff.jpeg' /><noscript><img loading='lazy' src='/800/600/http/radio-sgom.ru/wp-content/uploads/c/6/6/c66f1053983e505fe1a0fd419e82ccff.jpeg' /></noscript></p><h3><span class="ez-toc-section" id="i-12"> Как ускорить фоновые изображения? </span></h3><h4><span class="ez-toc-section" id="_IMG"> Используйте тег IMG с объектной подгонкой </span></h4><p> Фоновые изображения обычно используются в слайдерах с некоторым текстом/содержимым в центре, или у вас есть фиксированный элемент div, и вы хотите разместить изображение, которое будет «заполнять» без изменения размера области ( <strong> background-size: обложка </strong> ).</p><p> Раньше было очень сложно добиться этого с помощью тегов IMG. Поэтому использование фоновых изображений имело смысл.</p><p> Однако есть новое свойство CSS <strong> object-fit: cover </strong>, которое дает те же преимущества. Поддержка браузера также хороша.</p><h4><span class="ez-toc-section" id="i-13"> Предварительно загрузить фоновое изображение </span></h4><p> Независимо от того, используете ли вы фоновое изображение или тег IMG, если изображение находится в верхней части экрана, предварительно загрузите это изображение. Предварительная загрузка указывает браузеру загрузить это изображение с высоким приоритетом.</p><h4><span class="ez-toc-section" id="_IMG_display_none"> Тег IMG с хаком display: none </span></h4><p> Фоновые изображения можно использовать вместе с <code> background-color </code> , <code> background-repeat </code> , <code> background-attachment </code> , <code> background-position </code> и 4 background-blend 902 -mode </code> и т.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/erketai.kz/wp-content/uploads/2013/05/sana-tulga.jpg' /><noscript><img loading='lazy' src='/800/600/http/erketai.kz/wp-content/uploads/2013/05/sana-tulga.jpg' /></noscript> д.</p><p> Поэтому в некоторых ситуациях лучше использовать <code> background-image </code> вместо тега IMG, чтобы использовать другие свойства CSS.</p><p> Можно добавить обычную метку IMG с отображением <code>: нет </code> . Это скажет браузеру немедленно загрузить изображение, но отобразить его с использованием фонового изображения.</p><h4><span class="ez-toc-section" id="i-14"> Добавление адаптивных изображений </span></h4><p> Вы добавляете srcset и размеры к обычным изображениям для доставки адаптивных изображений на основе устройства:</p><pre> <img class="lazy lazy-hidden" decoding="async" srcset="" data-srcset="elva-fairy-320w.jpg 320 Вт, эльва-фея-480w.jpg 480w, эльва-фея-800w.jpg 800w" src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="elva-fairy-800w.jpg" alt="Эльва, одетая как фея"><noscript><img decoding="async" srcset="elva-fairy-320w.jpg 320 Вт, эльва-фея-480w.jpg 480w, эльва-фея-800w.jpg 800w" src="elva-fairy-800w.jpg" alt="Эльва, одетая как фея"></noscript> </pre><p> Точно так же вы можете сделать то же самое для фоновых изображений, используя <strong> image-set </strong> :</p><p> В противном случае вы получите одно и то же большое изображение для MacBook с разрешением 2880 пикселей и iPhone 6s с разрешением 750 пикселей!</p><h4><span class="ez-toc-section" id="_HTML-2"> Встроенное фоновое изображение в HTML </span></h4><p> Если ваше фоновое изображение находится внутри внешнего файла CSS, встройте его в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/40/08/2e/40082e5bea525a1260f021a4cd09b1df.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/40/08/2e/40082e5bea525a1260f021a4cd09b1df.png' /></noscript></div><div class="post-meta"></div></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/pochemu-durov-pokinul-vkontakte-internet-internet-i-smi-lenta-ru.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Почему дуров покинул вконтакте: Интернет: Интернет и СМИ: Lenta.ru</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/torrent-oshibka-write-to-disk-oshibka-v-utorrent-otkazano-v-dostupe-write-to-disk.html" rel="next"><span class="meta-nav">Следующая запись</span> Torrent ошибка write to disk: Ошибка в uTorrent: отказано в доступе write to disk</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/fon-kartinka-v-html-background-image-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='36699' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div><div class="col-md-4"><div id="sidebar" class="sidebar"><div id="search-9" class="widget widget_search"><form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"><div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span></div></form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div><ul><li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a></li><li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a></li><li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a></li><li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a></li><li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a></li><li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a></li><li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a></li><li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a></li><li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a></li><li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a></li><li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a></li></ul></div></div></div></div></div></div><footer class="mz-footer" id="footer"><div class="container footer-inner"><div class="row row-gutter"></div></div><div class="footer-wide"></div><div class="footer-bottom"><div class="site-info"> © Орфографика.рф, 2010 - 2019</div> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф.</div></footer></div><p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a></p> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://xn--80aahvkuapc1be.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_13058247d3082f39f5d009ed1b806645.js"></script></body></html>