Рамка в html: Рамки и границы | htmlbook.ru

Рамка для изображения и списки — dari-pats.lv

Web-мастеру

28.03.2020

Валерий

Всем приветик давно я уже не продолжал писать про построение ХТМЛ страниц. Вот пришло время и продолжаю. Итак сегодня мы рассмотрим как можно сделать рамку вокруг изображения,как можно менять её размер. Также разберем как создать список на сайте — обычный список либо же с нумерацией. Для начала рассмотрим как же получить рамку.

Как я уже сказал выше мы будем делать рамку вокруг изображения — кто не знает как вставить картинку на хтмл страницу просим сюда. Итак у нас имеется код картинки:

<html>
<body>
<img src=https://dari-pats.lv/images/39/sait/4/more.jpg>
</body>
</html>

Тут все по старому ничего не поменялось. Теперь разберемся как сделать рамку. Получить рамку вокруг изображения мы можем получить с помощью атрибута «border». Этот атрибут у картинка по умолчанию поставлен на 0. Соответственно если вы хотите убрать рамку где-то то нужно написать border=0.

Значения рамки можно писать просто числом,можно после числа указать пиксели либо проценты. Пример смотрите ниже.

<html>
<body>

<img border=»10″ width=»150px» height=»150px» src=https://dari-pats.lv/images/39/sait/4/more.jpg>

<img border=»10px» width=»150px» height=»150px» src=https://dari-pats.lv/images/39/sait/4/more.jpg>

<img border=»10%» width=»150px» height=»150px» src=https://dari-pats.lv/images/39/sait/4/more.jpg>

</body>
</html>


С рамкой разобрались — переходим к созданию списка. Создание списка может пригодится на вашей страничка так как можно получить понятное разделение текста по пунктам. Так же научимся создавать список с числа 1 по 6 и т. д. Для этого нам понадобятся теги <ul>,<li> оба тега нужно закрывать. Вот пример ниже:

<html>
<body>
<ul>
<li>Пункт первый</li>

<li>Пункт второй</li>
<li>Пункт третий</li>
<li>Пункт четвёртый</li>
<li>Пункт пятый</li>
</ul>
</body>
</html>


У списка есть свои атрибуты с помощью которых его можно сделать поинтересней. Например вместо круга мы можем получить квадрат или пустой круг. Для этого нужен атрибут type он пишется в теге <ul> к нему можно применить значения square (квадрат),disc (диск), circle (пустой круг).  


Так же я выше сказал ,что мы сделаем нумерованный список — в нем почит нечего не отличается только вместе тега <ul> мы пишем <ol>. И по умолчанию мы получим нумерованный список от 1 до 7… Пример:

<html>

<body>

<ol>

<li>Пункт первый</li>

<li>Пункт второй</li>

<li>Пункт третий</li>

</ol>

</body>

</html>


И также у него есть атрибуты и также пишутся через type только значения другие. Если мы хотим арабские числа то в теге <ol> пишем 1 либо не пишем нечего по умолчанию у нас уже арабские. Если хотим буквами заглавными либо прописными пишем А либо а, если хотим римские цифры то пишем I.

<html>
<body>
<ol type=»1″>
<li>Пункт первый</li>
<li>Пункт второй</li>
<li>Пункт третий</li>
</ol>

<ol type=»A»>
<li>Пункт четвёртый</li>
<li>Пункт пятый</li>
<li>Пункт шестой</li>
</ol>

<ol type=»a»>
<li>Пункт седьмой</li>

<li>Пункт восьмой</li>
<li>Пункт девятый</li>
</ol>

<ol type=»I»>
<li>Пункт десятый</li>
<li>Пункт одинадцатый</li>
<li>Пункт двенадцатый</li>
</ol>

</body>
</html>


Ну вот, пожалуй, на сегодня и все. Спасибо за внимание!

Безплатни уроци за CSS в W3Schools

CSS Рамките (border) ви позволяват да определите и стилизирате границите на даден HTML елемент.

Border Style

Пропъртито border-style определя какъв вид рамка ще използвате за конкретния елемент. Забележка: Нито едно от пропъртитата за рамки няма да работят, ако border-style не е дефиниран! Border-Style Стойности:

  • none: Елемента няма рамка
  • dotted: Определя пунктирана рамка
  • dashed: Рамка съставена от тирета
  • solid: Дефинира плътна рамка
  • double: Дефинира двойна рамка.
  • groove: Дефинира 3D grooved рамка, като ефекта зависи от това какви цветове са избрани.
  • ridge: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове.
  • inset: Дефинира 3D рамка, като ефекта отново зависи от избраните цветове
  • outset: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове

Разликата между 3D рамките е в ефекта, който се получава. Опитайте сами: Определете стила на рамката


Border-Width

Това пропърти задава дебелината на рамката. За ширината се използва или една от предварителните стойност (тънка, средна, дебела) или се означава с пиксели. Забележка: border-width не работи ако стила на рамката не е определен преди това.

p.one { border-style: solid; border-width: 5px; } p.two { border-style: solid; border-width: medium; }

Опитайте сами »

Border-Color

Пропъртито се използва за задаване на цвят на рамката. Цвета се определя по 3 начина:

  • име на цвят – „red“
  • RGB стойност – като „RGB (255,0,0)“
  • Hex – шестнадесетична стойнсот, като „# ff0000“

Може да направите рамката прозрачна (transparent). Забележка: Както и за дебелината, border-color няма да работи, освен ако не сте избрали стила на рамката преди това.

p.one { border-style: solid; border-color: red; } p.two { border-style: solid; border-color: #98bf21; }

Опитайте сами »

Border – Индивидуално Стилизиране на Страните

В CSS е възможно отделно да стилизираме различните страни на една и съща рамка.

Можем да приложим различни стилове, различна дебелина и цвят:

p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }

Опитайте сами »

Примера по-горе може да се направи само с едно пропърти:

p { border-style: dotted solid; }

Опитайте сами »

Пропъртито border-style може да има от една до четири стойности.

  • border-style: dotted solid double dashed;
    • горната рамка е dotted
    • дясната рамка е solid
    • долната рамка е double
    • лявата рамка се dashed
  • border-style: dotted solid double;
    • горната рамка е dotted
    • наляво и надясно рамките са solid
    • долната рамка е double
  • border-style: dotted solid;
    • горни и долни рамки са dotted
    • наляво и надясно рамки са solid
  • border-style: dotted;
    • всички четири рамки са dotted

По същия начин може да използвате пропърти за определяне на цвят и дебелина.


Border – Shorthand пропърти

Както прочетохте вече, много неща трябва да се вземат предвид при стилизирането на рамки. Може да използваме съкратено пропърти и да определим всички стилове наведнъж. По този начин се избягва повтаряемост и кода изглежда по-приличен. Пропъртито border е съкратен вариант на останалите:

  • border-width
  • border-style (ЗАДЪЛЖИТЕЛНО)
  • border-color

border: 5px solid red;

Опитайте сами »

Всички пропъртита за горната рамка в една декларация Този пример показва, как чрез съкратено пропърти можем да дефинираме всички стилове на горната рамка.

Определя стила на долната рамка Този пример показва как да стилизираме долната рамка.

Задава ширината на лявата рамка Този пример показва как да зададем ширина на лявата страна на рамката.

Дефиниране на цвят на четирите рамки Този пример показва как да настроите цвета на четирите страни на рамката.

Задайте цвета на дясната рамка Този пример показва как да зададете цвят на дясната рамка.


Всички CSS пропъртита за рамки

ПропъртиОписание
borderЗадава всички border пропъртита в една декларация
border-bottom
Задава всички пропъртита на долната част на рамката с една декларация
border-bottom-colorЗадава цвят на долната рамка
border-bottom-styleОпределя стила на долната рамка
border-bottom-widthЗадава ширина на долната рамка
border-colorЗадава цвят на цялата рамка
border-leftВсички пропъртита на лявата рамка в една декларация
border-left-colorКак се задава цвят на лявата рамка
border-left-styleЗадаване на стилове на лявата рамка
border-left-widthШирина на дясната част на рамката
border-rightДекларация със всички рамкови пропъртита наведнъж
border-right-colorЗадаване на цвят на дясната рамка
border-right-styleСтилизиране на дясната рамка
border-right-widthЗадаване на ширина на дясната рамка
border-styleЗадаване на стил на рамката
border-topВсички декларации за горната част в едно пропърти
border-top-colorЗадава цвета на горната рамка
border-top-styleЗадава стиловете на горната рамка
border-top-widthЗадава ширината на горната рамка
border-widthДеклариране на ширина на четирите рамки

В този урок ще научим как да стилизираме HTML списъци елементите в CSS и как да определяме и задаваме различните изгледи, как да стилизираме списъци.

В този урок ще научим как да стилизираме текст със CSS. Как се форматира текст в HTML елемент с помощта на CSS.

Тег HTML frameset — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 17 мар, 2022

  • Читать
  • Обсудить
  • Улучшить статью

    Сохранить статью

    Тег в HTML используется для определения набора фреймов. Элемент содержит один или несколько элементов фрейма. Он используется для указания количества строк и столбцов в наборе фреймов с их пробелами в пикселях. Каждый элемент может содержать отдельный документ.

    Примечание: Тег не поддерживается в HTML5.

    Синтаксис:

      

    Атрибуты: Список атрибутов кадров приведен ниже:

    • COLS : . для создания вертикальных фреймов в веб-браузере. Этот атрибут в основном используется для определения номера. столбцов и их размер внутри тега frameset.
    • строк : Атрибут строк используется для создания горизонтальных фреймов в веб-браузере. Этот атрибут используется для определения номера. строк и их размер внутри тега frameset.
    • border : Этот атрибут тега frameset определяет ширину границы каждого кадра в пикселях. Нулевое значение используется для отсутствия границы.
    • frameborder : Этот атрибут тега frameset используется, чтобы указать, должна ли отображаться трехмерная граница между кадрами или нет, для этого используйте два значения 0 и 1, где 0 не определяет границу, а значение 1 означает отсутствие границы. да будет граница.
    • промежутки между кадрами : Этот атрибут тега набора кадров используется для указания величины интервала между кадрами в наборе кадров. Это может принимать любое целочисленное значение в качестве параметра, который в основном обозначает значение в пикселях.

    Ниже примеры иллюстрируют элемент в HTML:
    Пример 1:

    HTML

    9003

    9003

    3111844444444444444444444444444444444444444444444444444444443 <444443 <44439118443 <4443931118443 < .0084 >

         < head >

             < title >frameset attribute title >

         head >

    < ФРИМЕТ ROWS = "20%, 60%, 20%" >

             < frame name = "top" src = "attr1. png « />

    < Кадр Название = " Main " = " Gradient3.png. = "Грагент.0084 < frame name = "bottom" src = "col_last.png" />

             < noframes >

    < Body > Браузер, над которым вы работаете, нет

    0084 >

             noframes >

         frameset >

        

    html >                               

    Выходные данные:  
    В приведенном выше примере в основном используются для создания трех горизонтальных фреймов: верхнего, среднего и нижнего с использованием атрибута строки тега frameset, а тег noframe используется для того браузера, который не поддерживает noframe.
     

    Example 2:  
     

    HTML

    < html >    

         < head >

             < title >атрибут frameset title >

    8 4 89 00083 head >

              

         < frameset cols = "30%, 40%, 30%" >

             < рамки Название = "Top" SRC = "ATRT1. PNG" />

    />

    9494933194444444

    < />

    <.0083 рамка Название = "Main" SRC = "Gradient3.png" />

    />

    />

    />

    . " src = "col_last.png" />        

             < noframes >

                 < Body > Браузер, с которым вы работаете. набор фреймов >

    html >

    2

    6  
    Приведенный выше пример в основном использовался для создания трех вертикальных фреймов: левого, центрального и правого с использованием атрибута col тега frameset.

    Поддерживаемые браузеры:

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari


    Связанные артистики

    HO Различные типы фреймов в HTML и типы тегов фреймов

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

    A-frame отображает содержимое независимо от своего контейнера. Несколько фреймов образуют коллекцию и называются набором фреймов. Расположение можно считать аналогичным ориентации строк и столбцов в таблице. Тег фрейма устарел в HTML5.

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

    Синтаксис фреймов

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

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

      

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

      

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

    Различные типы фреймов в HTML

    Одним из способов использования фреймов всегда была загрузка панелей навигации в один фрейм, а затем загрузка основных страниц в отдельный фрейм. Тег A-frame определяет один единственный оконный фрейм внутри.

    поддерживается браузерами Chrome, Internet Explorer, Mozilla, Safari и Opera Mini.

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

    Типы тегов фреймов

    Ниже приведены различные типы тегов фреймов: Атрибут

    Существует пять важных атрибутов, и мы обсудим их здесь:

    1. Col: Атрибут col дает вертикальные кадры. Ширина, однако, может быть указана 4 способами:

    • Пиксели: абсолютные значения могут быть указаны в пикселях. Если нам нужно создать три вертикальных кадра, мы можем указать значение: cols=”100,50,100”.
    • Процент: Можно указать процент окна браузера. Если нам нужно создать три вертикальных кадра, мы можем указать значение: cols=”40%,20%,40%”.

    Мы также можем использовать подстановочный знак здесь (*) и позволить подстановочному знаку занять оставшуюся часть окна, которая остается неупомянутой.

    cols=”30%,*,30%”

    Вывод:

    2. Строки: Атрибут строки задает горизонтальные рамки. Он указывает строки в наборе фреймов. Если нам нужно создать три горизонтальных кадра, мы используем:

    Например: строк = «10%, 80%, 10%».

    Мы также можем установить высоту каждой строки, как мы делали ранее в случае со столбцами.

    Вывод:

    3. Граница : указывает ширину границы каждого кадра в пикселях.

    Например, граница = «4». Если border="0", значит границы нет.

    4. Frameborder: Если между кадрами нужно отобразить трехмерную границу, то используем этот атрибут. Значение, которое принимает атрибут, равно 1 или 0 (Да или Нет).

    Например: frameborder="0" означает отсутствие границы.

    5. Промежуток между кадрами: Этот атрибут определяет расстояние между кадрами в наборе кадров. Здесь для этого атрибута может быть указано любое целочисленное значение.

    Например, framepacing="12" означает, что между кадрами должно быть расстояние 12 пикселей.

    Атрибут тега

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

    1. src: Мы предоставляем этому атрибуту имя файла, который должен быть загружен во фрейм. Значением этого атрибута может быть любой URL.

    Например: src= www.facebook.com

    2. name: Этот атрибут предоставляет имя фрейму. Он определяет, в какой фрейм должен быть загружен документ. Если у вас есть несколько ссылок в одном фрейме, которые загружаются в другой фрейм, мы используем этот атрибут. Затем второму фрейму нужно имя, чтобы идентифицировать себя как цель ссылки.

    Например, name="abc.htm."

    3. frameborder: Этот атрибут указывает, должны ли отображаться границы. Значение принимает значение 1 или 0 (Да или Нет).

    4. marginwidth: Атрибут полезен при указании ширины пространства между левой и правой границей фрейма, а также содержимого фрейма. Значение дается в пикселях.

    Например, marginwidth=”10”.

    5. высота поля: Атрибут полезен при указании высоты пространства между верхом и низом границы фрейма, а также содержимого фрейма. Значение дается в пикселях.

    Например, marginheight=”10”.

    6. noresize: Этот атрибут не позволяет пользователю вносить какие-либо изменения в уже существующие кадры. При отсутствии этого атрибута размер любого кадра можно изменить.

    Например, noresize=”noresize”.

    7. scrolling: Этот атрибут управляет внешним видом полос прокрутки, присутствующих в кадре. Значение «да», «нет» или «авто».

    Например, scrolling="no" означает, что полос прокрутки не должно быть.

    8. longdesc: Этот атрибут позволяет указать ссылку на другую страницу, содержащую подробное описание содержимого фрейма.

    Например, longdesc="framedesc.htm."

    Фреймы и поддержка браузера

    Старые браузеры не поддерживают фреймы, поэтому пользователю должны отображаться элементы .</p><p> На практике элемент<body> следует размещать внутри элемента <noframes>, поскольку элемент<frameset> должен заменить элемент<body>. Если браузеру не удается понять элемент<frameset>, он понимает содержимое элемента<body>, содержащегося в элементе <noframes>.</p><p> Это хороший способ разместить сообщение в таких сценариях для пользователя, который использует старые браузеры.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/tidWj.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/tidWj.jpg' /></noscript></div></div></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--90abhccf7b.xn--p1ai/raznoe/div-tablicza-css-sverstat-tabliczu-pri-pomoshhi-div.html" rel="prev">Div таблица: css &#8212; Сверстать таблицу при помощи div</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/programmirovanie-dlya-nachinayushhih-python-samouchitel-python-python-3-dlya-nachinayushhih-i-chajnikov.html" rel="next">Программирование для начинающих python: Самоучитель Python | Python 3 для начинающих и чайников</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="/html/ramka-v-html-ramki-i-graniczy-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.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='57723' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script><section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"> <input type="text" placeholder="search.." name="s" id="s" value=""/> <input type="submit" value="Search" /></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container"> © Компания <a href="http://вебджем.рф"> Вебджем.рф </a> 2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer> <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--90abhccf7b.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--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_b4a02ea7ab06cfcb8e144b512c939c55.js"></script></body></html>