Оформление placeholder css. Внешний вид названия полей или как изменить placeholder

Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с помощью javascript, положительная сторона данного метода это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в элементах input и textarea.
Код поля ввода в нашем примере будет выглядеть примерно так:

На выходе мы получает такое поле:

Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:

::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; }

Получаем:

Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:
font (так же смежные свойства)
background (так же смежные свойства)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

В разных браузерах правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых браузерах firefox, webkit и blink воспринимается как псевдоэлемент.

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

Input { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; }

В результате получаем поле ввода такого с placeholder такого вида:

Скрываем текст при клике по полю
По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.

:focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; }

Получаем такое действо:

Стремясь уменьшить форму и сократить визуальный шум, дизайнеры тег заменяют на атрибут placeholder , тем самым увеличивая нагрузку на кратковременную память. Людям с нарушенным зрением подсказку трудно прочитать. Лучше разместить непосредственно над полем ввода. Пустое поле легче распознаётся как элемент, требующий заполнения.

Плохо

Хорошо

Стилизация: изменить цвет placeholder CSS

Поменять стиль поля ввода с placeholder CSS

Плохо

Эффект placeholder для

Атрибут placeholder работает только для и , даже если у других тегов указан атрибут contenteditable . </p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Можно ввести текст" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Можно ввести текст" class="raz"></div> <h2>Древний метод на память, изменяющий value JavaScript</h2> <input onblur="this.value=(this.value==" onfocus="this.value=(this.value==this.title)?" value="Email" title="Email"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Email" title="Email" /> <p>Атрибут placeholder используется для создания подсказок внутри пустых полей ввода (теги <input> и <textarea>). В этой статье я рассмотрю способы стилизации плэйсхолдеров, а также, как сделать их более удобными в использовании.</p> <p>Начнём с примера для тех, кто ещё не знает, что такое плэйсхолдер и как его использовать:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>При разработке интерфейсов следует учитывать особенности поведения плэйсхолдеров. Текст плэйсхолдера исчезает, как только начинается ввод. Именно поэтому не стоит использовать их для передачи информации о самом поле ввода (сколько и какие именно символов оно должно содержать). Для данных целей лучше всего использовать тег <label> или параграф с небольшой подсказкой. Подробнее об особенностях использования плэйсхолдеров можно почитать .</p> <h2>Стилизация</h2> <p>Для стилизации плэйсхолдеров используются следующие правила:</p> ::-webkit-input-placeholder { color : blue ; } ::-moz-placeholder { color : blue ; } /* Firefox 19+ */ :-moz-placeholder { color : blue ; } /* Firefox 18- */ :-ms-input-placeholder { color : blue ; } <p>Выглядит ужасно, не так ли? И на это есть причина - до сих пор CSS правила для плэйсхолдеров не были стандартизированы и имплементация в каждом браузере различная. Подробнее о всех необходимых префиксах можно узнать на caniuse .</p> <p>Если вы используете CSS-препроцессор, то, скорее всего, для применения стилей к плэйсхолдерам вам будет удобнее всего написать простой миксин. Пример на Sass:</p> @mixin placeholder { & : :- webkit-input-placeholder { @content ; } & : - moz-placeholder { @content ; } & : :- moz-placeholder { @content ; } & : - ms-input-placeholder { @content ; } } <p>В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для отдельных элементов (опробуйте на SassMeister):</p> <span>// Глобально для каждого поля ввода </span>@include placeholder { color : blue ; } <span>// Для определённых полей ввода </span>.input { @include placeholder { color : green ; } } <h4>Пример</h4> <p>Синий текст для плэйсхолдера (никогда так не делайте):</p> .blue-text ::-webkit-input-placeholder { color : #2e8ece ; } .blue-text :-moz-placeholder { color : #2e8ece ; } .blue-text ::-moz-placeholder { color : #2e8ece ; } .blue-text :-ms-input-placeholder { color : #2e8ece ; } <p> <input type="text" placeholder="Начните печатать здесь" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Поддерживаемые свойства</h2> <p>Не каждое CSS свойство можно использовать с плэйсхолдерами. Вот <a href="/computer/poryadok-okazaniya-uslug-v-ramkah-arhivnyh-tarifnyh-planov-s.html">полный список</a> поддерживаемых свойств:</p> <ul><li>font и все связанные свойства (font-size , font-family и т.д.)</li> <li>background и все связанные свойства (background-color , background-image и т.д.)</li> <li>opacity</li> <li>text-indent</li> <li>text-overflow</li> <li>color</li> <li>text-transform</li> <li>line-height</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> </ul><h2>Анимации</h2> <p>Идеи анимаций принадлежит блогу html5.by .</p> <p>Все следующие примеры написаны с использованием препроцессора Sass . К каждому прилагается ссылка на SassMeister, по которой вы сможете найти скомпилированный CSS код.</p> <p>Скорее всего, вы захотите применять анимации к плэйсхолдерам при фокусе на поле ввода. Делается всё это достаточно просто. Достаточно всего несколько раз использовать написанный ранее миксин placeholder:</p> .input { @include placeholder { <span>// Стили для нормального состояния </span> } & :focus { @include placeholder { <span>// Стили после события focus </span> } } } <h3>Изменение прозрачности</h3> .input { @include placeholder { color : #aaa ; opacity : 1 ; transition : opacity 300ms ; } & :focus { @include placeholder { opacity : 0 ; } } } <p> <input type="text" placeholder="Демо: изменение прозрачности" class="demo-css-placeholders-input pl-opacity"></p> <h3>Сдвиг вправо и влево</h3> <p>Чем больше ширина поля ввода, тем больше должно быть значение свойства text-indent . Для стандартного поля ввода будет достаточно 500px , для более широких стоит подбирать вручную. От ширины поля ввода и значения text-indent зависит скорость анимации. Для сдвига влево нужно использовать отрицательные значения, например -500px .</p><p> <input type="text" placeholder="Демо: сдвиг вправо" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Демо: сдвиг влево" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Сдвиг вниз</h3> <p>Как и в прошлом примере анимация зависит от размеров воля ввода, но в этом случае внимание своит обратить на высоту. Для подавляющего большинства полей ввода искомое значение line-height будет находиться в пределах 100px . К сожалению, с помощью свойства line-height невозможно реализовать эффект сдвига вверх, так как свойство не принимает отрицательные значения.</p> .input { @include placeholder { text-indent : 0px ; transition : text-indent 300ms ; } & :focus { @include placeholder { text-indent : 500px ; } } } <p> <input type="text" placeholder="Демо: сдвиг вниз" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Всё вместе</h3> <p>Чтобы использовать код анимаций для плэйсхолдеров было приятно и удобно, можно написать небольшую библиотеку миксинов для любого препроцессора. Библиотека выглядит следующим образом ():</p> @mixin placeholder { & : :- webkit-input-placeholder { @content } & : - moz-placeholder { @content } & : :- moz-placeholder { @content } & : - ms-input-placeholder { @content } } @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) { @include placeholder { text-indent : 0 ; transition : text-indent $duration ; } & :focus { @include placeholder { text-indent : if ($side == left , - $position , $position ); } } } @mixin pl-slide-down ($position : 5 , $duration : 200ms ) { @include placeholder { line-height : 1 ; transition : line-height $duration ; } & :focus { @include placeholder { line-height : $position ; } } } @mixin pl-fade-out ($duration : 200ms ) { @include placeholder { opacity : 1 ; transition : opacity $duration ; } & :focus { @include placeholder { opacity : 0 ; } } } <p>Использовать её очень просто. Достаточно подключить желаемый миксин к любому полю ввода или просто создать одно глобальное правило для всех пэйсхолдеров на странице:</p> <span>// Для отдельных элементов </span>.pl-shift-right { @include pl-shift ( right ); } .pl-fade-out { @include pl-fade-out ; } <span>// Для всего остального </span>@include pl-shift ( left ); <h2>Autoprefixer</h2> <p>Если вы не используете препроцессор и всё ещё не хотите, чтобы ваш исходный <a href="/internet/v-kakoi-papke-faily-css-struktura-papok-i-elementov-papka-abstract-zdes-zhivut.html">CSS файл</a> превратился в кашу из префиксов для всех возможных браузеров, то обратите внимание на Autoprefixer . С его помощью чистый CSS можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::placeholder:</p> ::placeholder { color : orange ; } . input : : placeholder { color : blue ; } <p>После парсинга ваших стилей Autoprefixer создаст отдельный CSS файл, в котором пропишет все необходимые префиксы для всех указанных вами браузеров.</p> <h2>Что дальше</h2> <p>Как я уже писал выше, всё, что связано с применением стилей к плэйсхолдерам ещё не стандартизировано. Скоро это исправят. В спецификацию Selector Level 4 был добавлен псевдокласс:placeholder-shown , который, наконец-то, приведёт к стандарту всю ту безумную смесь из псевдоклассов и псевдоэлементов, которая существует сейчас. Следить за поддержкой можно на caniuse (сейчас не поддерживается ни в одном браузере).</p> <p>Применять стили с помощью:placeholder-shown будет гораздо проще:</p> .input :placeholder-shown { color : blue ; } <blockquote>Обычно атрибут placeholder в input и textarea используется для призыва к действию внутри этих элементов. В этой заметке опишу несколько вариантов стилизации текста placeholder-ов, а также варианты их анимации </blockquote> <p>Итак, цвет текста нашего placeholder-а можно изменить использовав, например следующий набор css-правил:</p> <p>::-webkit-input-placeholder { color : #c0392b ;} ::-moz-placeholder { color : #c0392b ;} /* Firefox 19+ */ :-moz-placeholder { color : #c0392b ;} /* Firefox 18- */ :-ms-input-placeholder { color : #c0392b ;} </p> <p>Объемность кода для стилизации такого простого свойства обусловлена отсутсивтемотсутствием общего стандарта, в связи с чем каждый браузер по-своему реализовал поддержку стилизации placeholder-а.</p> <p>Кроме того, поддерживаются не все <a href="/internet/podcherknutyi-shrift-html-podcherkivanie-ssylok-i-teksta-cherez-css.html">css свойства</a>. Вот перечень точно поддержываемых свойств:</p> <p>font (и связанные)<br> background (и связанные)<br> color<br> word-spacing<br> letter-spacing<br> text-decoration<br> vertical-align<br> text-transform<br> line-height<br> text-indent<br> text-overflow<br> opacity</p> <p>Также бывает так, что текст плейсхолдера «выходит» за пределы ширины элемента input или textarea (частый случай для <a href="/internet/samsung-galaxy-core-lte-otzyvy-samsung-galahy-sore-lte---tehnicheskie-harakteristiki-sim-karta.html">мобильных устройств</a>). При этом он автоматически некрасиво обрезается.</p> <p>Исправить эту неприятность нам поможет такое css-свойство, как text-overflow: ellipsis , которое добавит эстетическое троееточие к обрезанному участку placeholder-a. В стилях прописываем вот так:</p> <p>input [ placeholder ] { text-overflow : ellipsis ;} input ::-moz-placeholder { text-overflow : ellipsis ;} input :-moz-placeholder { text-overflow : ellipsis ;} input :-ms-input-placeholder { text-overflow : ellipsis ;} </p> <p>Для придания еще большей эстетики нашим placeholder-ам есть возможность добавить эффект его скрытия при получении фокуса соответствующего элемента.</p> <p>Несколько примеров такого скрытия с элементами анимации:</p> <p>/* плавное изменение прозрачности placeholder-а при фокусе */ </span> .input ::-webkit-input-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input ::-moz-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input :-moz-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input :-ms-input-placeholder { opacity : 1 ; transition : opacity 0.3s ease ;} .input { opacity : 0 ; transition : opacity 0.3s ease ;} .input :focus::-moz-placeholder { opacity : 0 ; transition : opacity 0.3s ease ;} .input :focus:-moz-placeholder { opacity : 0 ; transition : opacity 0.3s ease ;} .input :focus:-ms-input-placeholder { opacity : 0 ; transition : opacity 0.3s ease ;} <span>/* сдвиг placeholder-а вправо при фокусе*/ </span> .input ::-webkit-input-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input ::-moz-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input :-moz-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input :-ms-input-placeholder { text-indent : 0px ; transition : text-indent 0.3s ease ;} .input <span>:focus::-webkit-input-placeholder </span> { text-indent : 500px ; transition : text-indent 0.3s ease ;} .input :focus::-moz-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} .input :focus:-moz-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} .input :focus:-ms-input-placeholder { text-indent : 500px ; transition : text-indent 0.3s ease ;} <span>/* сдвиг placeholder-а вниз при фокусе*/ </span> .input ::-webkit-input-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input ::-moz-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input :-moz-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input :-ms-input-placeholder { line-height : 20px ; transition : line-height 0.5s ease ;} .input <span>:focus::-webkit-input-placeholder </span> { line-height : 100px ; transition : line-height 0.5s ease ;} .input :focus::-moz-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;} .input :focus:-moz-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;} .input :focus:-ms-input-placeholder { line-height : 100px ; transition : line-height 0.5s ease ;} </p> <p>На этом и закончим.</p> <p>Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.</p> <p>Итак, начнем с примера для тех, кто не знает, что такое placeholder.</p> <h4>html</h4> <input type="text" placeholder="Оставьте сообщение здесь"> <p>Стиль placeholder-a можно изменить с помощью такого набора css правил:</p> <h4>css</h4> ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} <p>Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.</p> <p>В IE и <a href="/internet/plagin-adobe-flash-player-dlya-firefox-obnovlenie-adobe-flash-player-dlya-firefox-v-staryh-versiyah.html">старых firefox</a> (до 18-го) placeholder считается псевдоклассом, а в <a href="/computer/kak-sdelat-udobnoi-rabotu-s-bolshim-kolichestvom-vkladok-v-brauzere-kak-vernut.html">новых firefox</a>, webkit и blink – псевдоэлементом.</p> <p>Смотрим, что получилось:</p> <p>Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:</p> <ul><li>font (и сопутствующие свойства)</li> <li>background (и сопутствующие свойства)</li> <li>color</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> <li>text-transform</li> <li>line-height</li> <li>text-indent</li> <li>text-overflow</li> <li>opacity</li> </ul><h2>А если placeholder не вмещается?</h2> <p>Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на <a href="/internet/kesh-na-telefone-mozhno-li-udalyat-dannye-kak-ochistit-kesh-brauzera-i.html">мобильных девайсах</a>. В этом случае <a href="/internet/css-obrezat-izobrazhenie-po-vysote-kosoi-kak-pri-pomoshchi-css.html">длинный текст</a> placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.</p> <h4>css</h4> input {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;} <h2>Как скрыть placeholder при фокусе?</h2> <p>Скрывание placeholder-а происходит по-разному.</p> <ol><li>в некоторых браузерах при получении фокуса инпутом</li> <li>в других браузерах при наличии хотя бы одного введенного символа</li> </ol><p>Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:</p> <h4>css</h4> :focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} <h2>Скрываем placeholder красиво</h2> <p>Можно также добавить transition для появления и скрытия placeholder-a:</p> <h4>css</h4> /* плавное изменение прозрачности placeholder-а при фокусе */ .input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /* сдвиг placeholder-а вправо при фокусе*/ .input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} /* сдвиг placeholder-а вниз при фокусе*/ .input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} <p>Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;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()+ "border='0' width='1' height='1' loading=lazy>");</script> <div class="clear"></div> <div class="share"> <div class="title">Понравилась статья? Поделись с друзьями:</div> <div class="social-likes"> <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div> <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> </div> <div class="information"> <div class="date left" itemprop="datePublished">26.03.2020</div> <div class="category left" itemprop="articleSection">Компьютер </div> <div class="clear"></div> </div> <div class="related_posts"> <div class="block_title">Самое интересное:</div> <div class="items"> <div class="item left"> <div class="thumb"> <a href="/internet/oboznach-kazhdyi-mnogougolnik-izmer-dliny-storon-kazhdogo.html"><img class="img" src="/uploads/6c9aeda02dcfdcce47bc0325518a3798.jpg" loading=lazy> </a> </div> <div class="name"><a href="/internet/oboznach-kazhdyi-mnogougolnik-izmer-dliny-storon-kazhdogo.html">Обозначь каждый многоугольник измерь длины сторон каждого</a></div> </div> <div class="item left"> <div class="thumb"> <a href="/internet/youtube-com-activate-vypolnit-vhod-c-televizora-podklyuchaem-youtube-k.html"><img class="img" src="/uploads/b7a661e12add337de9e27ef4d3505440.jpg" loading=lazy> </a> </div> <div class="name"><a href="/internet/youtube-com-activate-vypolnit-vhod-c-televizora-podklyuchaem-youtube-k.html">Подключаем YouTube к телевизору</a></div> </div> <div class="item left"> <div class="thumb"> <a href="/internet/nazvaniya-bolshih-chisel-nazvaniya-bolshih-chisel-reshenie-sostavnoi.html"><img class="img" src="/uploads/58c5c7236ac6dd7d81f607b19ddadce4.jpg" loading=lazy> </a> </div> <div class="name"><a href="/internet/nazvaniya-bolshih-chisel-nazvaniya-bolshih-chisel-reshenie-sostavnoi.html">Названия больших чисел Решение составной задачи</a></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> <aside class="right"> <div class="block cats"> <div class="block_title">Рубрики блога</div> <div class="block_data"> <ul class="first_level"> <li> <a href="/category/internet/"> <div class="icon"><img src="https://zhumor.ru/wp-content/uploads/2016/06/ic_cat11.png" alt="" loading=lazy></div>Интернет </a> </li> <li> <a href="/category/internet/"> <div class="icon"><img src="https://zhumor.ru/wp-content/uploads/2016/06/ic_cat11.png" alt="" loading=lazy></div>Интернет  </a> </li> <li> <a href="/category/computer/"> <div class="icon"><img src="https://zhumor.ru/wp-content/uploads/2016/06/ic_cat11.png" alt="" loading=lazy></div>Компьютер  </a> </li> </ul> </div> </div> <div class="banner" style="margin: 0 auto 30px;width:240px;"> </div> <div class="banner"> </div> <div class="block articles "> <div class="block_title">Популярные статьи</div> <div class="block_data"> <div class="items"> <div class="item"> <div class="thumb"> <a href="/internet/chasy-casio-obzor-chasovyh-novinok-casio-dlya-vozdushnyh-pilotov.html"> <img src="/uploads/c7a97386f2353b820e30ec2a9a4b2bae.jpg" alt="Обзор часовых новинок CASIO" / loading=lazy> </a> </div> <div class="name"><a href="/internet/chasy-casio-obzor-chasovyh-novinok-casio-dlya-vozdushnyh-pilotov.html">Обзор часовых новинок CASIO</a></div> </div> <div class="item"> <div class="thumb"> <a href="/internet/nastroika-racii-vektor-27-komfort-proverka-rabotosposobnosti.html"> <img src="/uploads/aa48c4b8a4b9c93be0bf0da6cc85a2a9.jpg" alt="Проверка работоспособности радиостанции" / loading=lazy> </a> </div> <div class="name"><a href="/internet/nastroika-racii-vektor-27-komfort-proverka-rabotosposobnosti.html">Проверка работоспособности радиостанции</a></div> </div> <div class="item"> <div class="thumb"> <a href="/internet/diapazony-pmr-lpd-frs-gmrs-i-kdr-sravnenie-diapazonov-si-bi-lpd-i-pmr-dlya.html"> <img src="/uploads/2ca8dc0a90215a238772dfdbdba2f08d.jpg" alt="Сравнение диапазонов Си-Би, LPD и PMR Для чего это нужно" / loading=lazy> </a> </div> <div class="name"><a href="/internet/diapazony-pmr-lpd-frs-gmrs-i-kdr-sravnenie-diapazonov-si-bi-lpd-i-pmr-dlya.html">Сравнение диапазонов Си-Би, LPD и PMR Для чего это нужно</a></div> </div> <div class="item"> <div class="thumb"> <a href="/internet/vch-razemy-dlya-antenn-i-kabelya-granichnye-chastoty-dlya-vch-razemov-razemy.html"> <img src="/uploads/765ab643b3fc4e0c08831347871ccade.jpg" alt="Граничные частоты для вч разъемов Разъемы вч типы" / loading=lazy> </a> </div> <div class="name"><a href="/internet/vch-razemy-dlya-antenn-i-kabelya-granichnye-chastoty-dlya-vch-razemov-razemy.html">Граничные частоты для вч разъемов Разъемы вч типы</a></div> </div> <div class="item"> <div class="thumb"> <a href="/computer/vindovs-7-piratskaya-propadaet-zastavka-chernyi-ekran-kak.html"> <img src="/uploads/5c5350e802f861b40fd39273beadfc58.jpg" alt="Виндовс 7 пиратская пропадает заставка черный экран" / loading=lazy> </a> </div> <div class="name"><a href="/computer/vindovs-7-piratskaya-propadaet-zastavka-chernyi-ekran-kak.html">Виндовс 7 пиратская пропадает заставка черный экран</a></div> </div> </div> </div> </div> <div class="banner airSticky"> </div> </aside> <script type="text/javascript">!function(t,e){ "use strict";function n(){ if(!a){ a=!0;for(var t=0;t<d.length;t++)d[t].fn.call(window,d[t].ctx);d=[]} }function o(){ "complete"===document.readyState&&n()} t=t||"docReady",e=e||window;var d=[],a=!1,c=!1;e[t]=function(t,e){ return a?void setTimeout(function(){ t(e)} ,1):(d.push({ fn:t,ctx:e} ),void("complete"===document.readyState||!document.attachEvent&&"interactive"===document.readyState?setTimeout(n,1):c||(document.addEventListener?(document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",n,!1)):(document.attachEvent("onreadystatechange",o),window.attachEvent("onload",n)),c=!0)))} }("wpBruiserDocReady",window); (function(){ var wpbrLoader = (function(){ var g=document,b=g.createElement('script'),c=g.scripts[0];b.async=1;b.src='/?gdbc-client=3.1.11-'+(new Date()).getTime();c.parentNode.insertBefore(b,c);} );wpBruiserDocReady(wpbrLoader);window.onunload=function(){ };window.addEventListener('pageshow',function(event){ if(event.persisted){ (typeof window.WPBruiserClient==='undefined')?wpbrLoader():window.WPBruiserClient.requestTokens();} },false);} )(); </script> <script type='text/javascript' src='https://zhumor.ru/wp-content/plugins/cookie-notice/js/front.min.js?ver=1.2.40'></script> <script type='text/javascript' src='/assets/front1.min1.js'></script> <script type='text/javascript' src='https://zhumor.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <div id="cookie-notice" role="banner" class="cn-bottom bootstrap" style="color: #fff; background-color: #000;"><div class="cookie-notice-container"><span id="cn-notice-text">Друзья, я использую файлы Cookies для наилучшего представления своего сайта. Если Вы согласны, нажмите "Ок".</span><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie button bootstrap">Ок</a> </div> </div> <div class="clear"></div> </div> <div class="cont"> <footer> <div class="col left"> <div class="l"> <img src="/img/logo.png" loading=lazy> </div> <div class="copyright">zhumor.ru - Просто и доступно. Обучаем технологиям</div> </div> <ul id="menu-foot" class="links left"> <li class="menu-item type-post_type object-page "><a href="/feedback.html">Контакты</a></li> <li class="menu-item type-post_type object-page "><a href="">Реклама и сотрудничество</a></li> <li class="menu-item type-post_type object-page "><a href="">О сайте</a></li> </ul> <div class="clear"></div> </footer> </div> </div> <div class="buttonUp"><a href="#top"></a></div> </div> <script src="/assets/jquery1.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/jquery-migrate.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/scrollTop.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/social-likes.min.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/fancybox.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/jquery.airStickyBlock.min.js"></script> <script src="/wp-includes/js/comment-reply.min.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/scripts.js"></script> <script>// <![CDATA[ // < ![CDATA[ function GoTo(link){ window.open(link.replace("_","http://","https://"));} // ]]></script> <script type="text/javascript">(window.Image ? (new Image()) : document.createElement('img')).src = location.protocol + '//vk.com/rtrg?r=VaOkaUHa8b7aOnpvk6*6aJe31KwblJWqkjoKUg6hphyBGU1uxyonnbQb1r4oIvdJyeruVbHyREoFF4QvP9MgyWw60g4RK7x6C7HK4QqiFEFVR9ga/77OHVf6lAy59pIahKMAGkZelNuxMkkmSG4v6PPVXCRWTvnrTQdWQiLrJII-';</script> </body> </html>