Как подключить CSS к HTML и инструкции по работе со стилями
- Создание сайта на Adobe Dreamweaver
- Первая веб страница
- Форматирование текста в HTML
- Создание списков
- Гиперссылки
- Создание таблиц в блокноте
- Цвета в HTML
- Как создать форму в HTML?
- Табличная верстка сайта
- Теги в HEAD
- Изображения в html
- Блочная структура сайта
- Блочная верстка
В этом уроке мы поговорим о каскадных таблицах стилей (CSS) и о том, насколько они упрощают настройку дизайна сайта. С помощью CSS можно в одном файле задать оформление на всех страницах сайта.
Полезная реклама: многие российские банки уже ввели комиссию на валютные счета, чтобы сохранить накопления и оплачивать зарубежные сервисы, рекомендуем открыть банковскую карту в Белоруссии, Казахстане или Киргизии. Это можно сделать без посещения страны через надежного посредника.
При создании сайта нужно придерживаться такой концепции: языком HTML описывают содержание страниц на сайте, а языком CSS описывают дизайн и оформление элементов страницы.
Например, мы можем в одном файле задать цвет, фон, размеры шрифта, оформление картинок. А в файлах сайта мы вставим содержание, текст, изображения.
Файл, в котором описывается дизайн страницы, и оформление элементов обычно называют style.css.
В блокноте создайте файл style.css.
Давайте опишем дизайн первого элемента – body:
body { background: grey; color: white; }
Сохраните этот файл в папке, где вы храните файлы сайта.
С помощью этой записи мы зададим белый шрифт на сером фоне. Если вы помните, в языке html эта запись выглядела так:
<body bgcolor="grey" text="white">
Если мы будем создавать новые страницы нашего сайта, то каждый раз нам нужно будет прописывать тег body. А можно один раз описать элемент body в файле style.
css , прикрепить этот файл к каждой странице, и элемент body будет все время отображаться так, как мы его описали в файле style.css.
Для того чтобы прикрепить файл style.css нам нужно после тега <head> вставить следующую запись:
<link href="style.css" rel="stylesheet" type="text/css" />
Давайте в каждом файле, который мы создали, вставим эту запись, а также изменим тег body:
<body>
Как видите, во всех файлах фон стал серым, а текст белым. Теперь, если мы хотим поменять цвет фона, то нам нужно изменить только описание селектора body, и во всех файлах автоматически поменяется цвет фона.
Давайте теперь разберем, как задавать оформление элементов. В общем виде команды css выглядят так:
Селектор {атрибут:значение}
Селектор — это название элемента разметки, атрибут- название параметра, который мы хотим описать.
В следующих уроках мы подробно разберем, как нам описывать текстовые, строчные элементы, как работать с изображениями.
Работа с Dreamwever.
Давайте создадим страницу style.css. Для этого зайдите в меню File – нажмите New. У вас откроется такое окно:
Зайдите на вкладку General, в категорию Basic Page, выберите CSS, нажмите Create (на рисунке обведено овалами).
Вы создадите страницу с расширением css. Сохраните ее под названием style.css.
По умолчанию первая строка выглядит так:
/* CSS Document */
/*___*/ — между этими знаками можно вводить комментарии, браузерами они не интерпретируются.
Введите:
body { background: grey; color: white; }
Сохраните страницу. Теперь в каждую страницу, которую мы создавали, в тег <head> введите ссылку на страницу css:
<link href="style.css" rel="stylesheet" type="text/css" />
А тег body измените так: <body>
В результате все наши страницы написаны белым текстом на сером фоне.
В следующих уроках мы научимся с помощью css форматировать текст и работать с изображениями.
Adobe Dreamweaver
Способы прижать HTML элемент к нижнему краю экрана
Много занимаюсь версткой, потому возникают разные интересные задачи. Решил не оставлять без внимания этот интересный опыт.
Одна из таких задач, которая нередко возникают при верстке сайтов, желание заказчика «прибить» футер шаблона к нижнему краю окна браузера. Иначе, когда на странице мало контента, нижняя часть шаблона (футер) болтается как одна субстанция в проруби.
Дальше я показываю целых три способа как разместить футер у нижнего края экрана.
Для предметного разговора глянем на скелет HTML документа.
<html> … <body> <div> … </div> <div> … </div> <div> … </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> . <body> <div> … </div> <div> … </div> <div> … </div> </body> </html> |
..Условно документ разделен на три части — есть шапка (div#header), содержательная часть (div#content) и футер (div#footer).
Фиксированное позиционирование (fixed).
Один из вариантов, который не решает задачу, но маскирует проблему — установка фиксированного позиционирования. Чаще всего фиксируется позиция как шапки так и футера, превращая документ в аналог свитка. Мы всегда видим верх и низ шаблона, а содержание прокручивается скроллингом, заходя под них.
Для фиксирования сверху мы пишем стили для шапки:
#header { position: fixed; top: 0; }
#header { position: fixed; top: 0; } |
А для футера это будет так:
#footer { position: fixed; bottom: 0; }
#footer { position: fixed; bottom: 0; } |
Единственной проблемой будет то, что часть содержания будет скрыта шапкой и футером.
Что можно решить, добавив соответствующий padding или margin для контейнера #content. На картинке ниже пример позиционирования для нашего случая.
В левой части — мы просто зафиксировали шапку и футер (их роль играют синие квадраты 100×100). Содержание оказалось перерытым шапкой. В правой части мы добавили padding для зеленого прямоугольника, играющего роль содержимого. Теперь отступы не дают перекрываться содержимому, и мы получили т.н. свиток — прокручивать контент можно скроллингом, если документ не умещается в видимой области.
Вот HTML код примера.
<html>
<style>
#header {
position: fixed;
top: 0;
background-color: #88F;
height: 100px; width: 100px;
}
#content {
background-color: #8F8;
min-height: 300px; width: 150px;
/* padding: 100px 0; */
}
#footer {
position: fixed;
bottom: 0;
background-color: #88F;
height: 100px; width: 100px;
}
</style>
<body>
<div>.
..</div>
<div>
<pre>
0000
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012
0013
0014
</pre>
</div>
<div>…</div>
</body>
</html>
|
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 36 37 38 39 40 41 42 43 44 45 46 47 |
<html> <style>
#header { position: fixed; top: 0; background-color: #88F; height: 100px; width: 100px; } #content { background-color: #8F8; min-height: 300px; width: 150px; /* padding: 100px 0; */ } #footer { position: fixed; bottom: 0; background-color: #88F; height: 100px; width: 100px; } </style> <body> <div>. <div> <pre>
0000 0001 0002 0003 0004 0005 0006 0007 0008 0009 0010 0011 0012 0013 0014
</pre> </div> <div>…</div> </body> </html> |
..</div>Табличная магия. Позиционирование таблицей.
Таблица — это по истине чудесный элемент верстки. Он позволяет просто делать то, что нужно без лишних размышлений. Применительно к нашему случаю, роль всех трех элементов (шапки, содержания и футера) будет играть строки таблицы.
Так как таблица — это непрерывный объект (строки идут одна за другой), то проблем с перекрытием одного из трех элементов двумя другими не будет. Здесь мы получаем решение нашей задачи, но только для «нормальных» браузеров. А нормальные это все, кроме IE, как вы уже догадались.
На рисунке поверх Opera, результат рендеринга в IE Edge c эмуляцией 9й версии IE.
В IE версий 10-11, результат аналогичен Opera.
Вот исходный пример (HTML код), который я тестировал.
<html> <style> #total-wrapper { height: 100%; } #header { background-color: #88F; height: 100px; } #content { background-color: #8F8; } #footer { background-color: #88F; height: 100px; } #total-wrapper tr { vertical-align: top; } pre { width: 100px; margin: 0} </style> <body> <table cellpadding=0 cellspacing=0 border=0> <tr><td>…</td></tr> <tr><td> <pre> 0000 0001 0002 0003 0004 0005 0006 0007 0008 0009 0010 0011 0012 0013 0014 </pre></td></tr> <tr><td>…</td></tr> </table> </body> </html>
|
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 36 37 38 39 40 41 42 43 44 45 46 |
<html> <style> #total-wrapper { height: 100%; } #header { background-color: #88F; height: 100px; } #content { background-color: #8F8; } #footer { background-color: #88F; height: 100px; }
#total-wrapper tr { vertical-align: top; } pre { width: 100px; margin: 0}
</style> <body> <table cellpadding=0 cellspacing=0 border=0> <tr><td>. <tr><td> <pre>
0000 0001 0002 0003 0004 0005 0006 0007 0008 0009 0010 0011 0012 0013 0014
</pre></td></tr> <tr><td>…</td></tr> </table> </body> </html> |
..</td></tr>Совместимость с IE можно повысить аж до 7 версии добавлением следующих стилей, задающих явно высоту родительских контейнеров:
html, body { height: 100%; }
html, body { height: 100%; } |
Впрочем, в 7 й версии нужно будет сделать ещё ряд манипуляций, чтобы привести таблицу к точно такому же виду. В последнее время проблема с IE не так остра, как ранее, доля старых версии этого браузера малозначительна, так что выпад в сторону IE — скорее моё нытье :), а не реальная проблема.
Снова элементы div. «Шаг назад».
Здесь мы возвращаемся к верстке с помощью div. Идея следующая — задать общий контейнер (#total-wrapper) 100% высотой — куда в нашем случае входят шапка и содержание, а футер разместить следом за ним с позиционированием absolute. При этом сделать как бы шаг назад — т.е. с помощью margin сместить футер вверх.
Здесь возникнет снова проблема с наложением футера на содержание, но мы уже знаем как с этим бороться.
В итоге получаем нужное нам свойство для футера — он прилипает к нижнему краю, если контента мало и нет полосы прокрутки, и сдвигается ниже, когда возникает вертикальная полоса прокрутки.
HTML для этого примера:
<html>
<style>
html, body { height: 100%; margin: 0; }
pre { margin: 0; }
#wrapper-total {
min-height: 100%;
}
#header {
background-color: #88F;
height: 100px;
width: 100px;
}
#content {
background-color: #8F8;
width: 150px;
padding-bottom: 100px;
}
#footer {
position: absolute;
margin-top: -100px;
background-color: #88F;
height: 100px;
width: 100px;
}
</style>
<body>
<div>
<div>.
..</div>
<div>
<pre>
0000
0001
0002
0003
0004
0005
0006
0007
0008
0009
0010
0011
0012
0013
0014
</pre>
</div>
</div>
<div>…</div>
</body>
</html>
|
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 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<html> <style>
html, body { height: 100%; margin: 0; } pre { margin: 0; }
#wrapper-total { min-height: 100%; } #header { background-color: #88F; height: 100px; width: 100px; } #content { background-color: #8F8; width: 150px; padding-bottom: 100px; } #footer { position: absolute; margin-top: -100px;
background-color: #88F; height: 100px; width: 100px; } </style> <body> <div> <div>. <div> <pre>
0000 0001 0002 0003 0004 0005 0006 0007 0008 0009 0010 0011 0012 0013 0014
</pre> </div> </div> <div>…</div> </body> </html> |
..</div>Так как футер у нас 100 точек в высоту, то нужно вернуться на 100 точек вверх (margin-top: -100px). Ровно столько же надо зарезервировать места в контейнере содержимого (padding-bottom: 100px). Данный пример работает даже в эмуляции IE7.
Возможно, вы обратили внимание, что вместо height: 100%, я использую min-height: 100% для div#wrapper-total. В нашем случае оба варианта будут работать, но есть ещё кое что, о чем я расскажу в следующий раз :).
Данная запись опубликована в 14.09.2015 22:16 и размещена в Танцы с CSS.
Вы можете перейти в конец страницы и оставить ваш комментарий.
Библиотека и технологии | Колледж Уэллсли
NEW: Library FOLIO Migration News and Information и
FAQ по библиотечным системам
Каталог библиотек | Руководства по исследованиям | Базы данных | АрхивКосмос | Цифровой репозиторий
WorldCat | Поиск артикулов | Поиск публикаций
Полезные ресурсы
Оборудование для заимствования
Планы этажей CLAPP
Подключите к Интернету
Connect Удаленно (VPN)
Кредит межлибренного займа
Политика открытого доступа
Печать
Arend Bibrail Iptome
New? Начать!
Документирование опыта COVID-19 Wellesley College
Архивы Wellesley College рады объявить о запуске «Документирования COVID-19 колледжа Wellesley».
Опыт». Этот проект направлен на краудсорсинг цифровых материалов, связанных с опытом жизни сообщества колледжа Уэллсли во время глобальной пандемии COVID-19. Архивы собирают пожертвования от членов сообщества колледжа Уэллсли, включая сотрудников, преподавателей, студентов и выпускников. , Пожертвования могут включать в себя что угодно: от художественных начинаний, таких как поэзия, до заданий, которые пришлось перенести в условиях перехода на виртуальное обучение, до фотографий — всего, что говорит об этом беспрецедентном времени и о том, как оно повлияло на жизнь сообщества Уэллсли. часть официальных записей колледжа того времени, которое мы переживаем, и будет сохранена как часть нашего нового COVID-19.коллекция.
Архиву нужна ваша помощь! Пожалуйста, отправляйте пожертвования здесь: https://sites.google.com/wellesley.edu/documentingcovid-19/home
Мы надеемся собрать материалы от самых разных членов сообщества, насколько это возможно. Если у вас есть технические вопросы о подаче или общие вопросы о процессе, пожалуйста, не стесняйтесь обращаться к нам по адресу archives@wellesley.
edu или 781-283-3745. Пожертвования будут приниматься на постоянной основе.
Объявление победителей конкурса студенческих библиотек 2022 года!
Комитет по оценке наград студенческой библиотеки с радостью объявляет лауреатов премии студенческой библиотеки за исследования 2022 года, спонсируемой библиотекой друзей колледжа Уэллсли (подробнее о наградах).
Лауреаты премии продемонстрировали вдумчивый, методичный и научный подход к исследованиям и творчески использовали разнообразные библиотечные ресурсы, что помогло им создать выдающийся исследовательский проект.
Несмотря на продолжающиеся проблемы с проведением исследований в течение еще одного пандемического года, мы снова получили большое количество заявок (всего на одну меньше прошлогоднего рекорда в 75). Мы по-прежнему впечатлены разнообразием и творчеством студентов, а также их вдумчивыми размышлениями о исследовательском процессе. Благодаря щедрости друзей библиотеки колледжа Уэллсли мы смогли присудить по две премии в каждой категории, а также два почетных упоминания.
Награда за первый год обучения
Ханна Гримметт, 25 лет, , получила награду за первый год обучения за свою статью SOC 212 «Структурные барьеры для бедных сельских жителей: ответ на культурный аргумент». Вспомогательный преподавательский состав: Джо Свингл
Миа Зильберштейн ’24 получила награду за первый год работы за свою статью WRIT 134 «Битва за душу наших судов: дело для администрации Байдена, статья I, независимая иммиграционная судебная система. ” Вспомогательный преподавательский состав: Эрин Баттат
Награда уровня 100/200
Ида Беккет ’24 получила награду уровня 100/200 за свою статью MES/REL 264 «The Sufi of Origin and Serious Кофе и его дома: как стимулятор спровоцировал восстание в Османской империи». Вспомогательный преподавательский состав: Эфе Мурат Балыкчиоглу
Кейт Хабич, 22 года, получила награду уровня 100/200 за свою работу ES 214 «Понимание и устранение загрязнения атмосферы бензолом в Пасадене, штат Техас».
Вспомогательный преподавательский состав: Beth DeSombre
Награда уровня 300
Жаклин Кай ’22 получила награду уровня 300 за свою статью NEUR 300 «Изучение пробиотиков для двухкомпонентной терапии: фекальная трансплантация» Болезнь Альцгеймера на мышиной модели». Вспомогательный преподавательский состав: Майкл Уист
Натали Ли, 23 года, , получила награду уровня 300 за свою статью HIST 334 «Поднятие знамени жесткой экономии: взгляды на экономический переход 19Итальянские левые 70-х». Вспомогательный преподавательский состав: Куинн Слободян
Награда за независимое исследование
Ребекка Кокс, 22 года получила награду за независимое исследование за свой проект ES 250 «Планктон Национального морского заповедника Stellwagen Bank». Вспомогательный преподавательский состав: Джеки Маттес
Ребекка Хоббс ’22 получила награду независимого исследования за свою статью PSYC 350 «Комплексное исследование связей между детской травмой и психозом у афроамериканцев».
Вспомогательный преподавательский состав: Christen Deveney
Почетное упоминание
Ниам Бэйлисс ’22 получила почетное упоминание за свою статью ES 312 «Уличные деревья и городское планирование: изучение неравномерного распределения городских крон деревьев. ” Вспомогательный преподавательский состав: Beth DeSombre
Сара Шарпантье, 22 года, , получила почетную награду за свое видео-эссе CAMS 302 «Разложение: время жизни и конец жизни изображения». Вспомогательный факультет: Кодруца Морарь
Работы-победители скоро будут доступны в цифровом репозитории Wellesley College.
Дополнительная информация: Karen Storz, [email protected]
Wellesley College присоединяется к HathiTrust
Wellesley College в настоящее время является членом HathiTrust, глобального объединения исследовательских и академических библиотек, выполняющих свою миссию по обеспечению сохранности и доступности культурных памятников в будущем.
HathiTrust предлагает доступ для чтения в максимально возможной степени, разрешенной законом об авторском праве США, вычислительный доступ ко всему корпусу для научных исследований и другие новые услуги, основанные на объединенной коллекции.
Узнайте больше о HathiTrust и о том, как вы можете использовать его для своих исследований.
Добавление CSS на веб-страницу
Урок 2. Добавление CSS на веб-страницу
/en/basic-css/about-css/content/
Добавление CSS на веб-страницу
Как только вы поймете, что такое CSS на самом деле, вам нужно увидеть, как он работает. Отличный способ сделать это — написать и запустить собственный CSS на своем компьютере. Этот урок предполагает, что вы:
- Настроили рабочее место.
- Знакомы с основами HTML и завершили самостоятельный проект из учебника по основам HTML.
Если вы еще не завершили руководство Basic HTML , но уже хорошо разбираетесь в HTML, вы можете загрузить готовый проект для самостоятельной работы и быть в курсе этого руководства.
Все, что вам нужно сделать после загрузки, это разархивировать файл и переместить папку GCF Programming Tutorials , которую вы найдете внутри, в место, которое вы будете помнить.
Создать файл
Выполните следующие действия, чтобы создать свою первую таблицу стилей CSS .
- Открыть Sublime Text .
- Откройте меню File и выберите New File .
- В Sublime Text должна открыться новая вкладка с пометкой без названия .
- Вернитесь в меню Файл и выберите Сохранить как .
- Найдите папку GCF Programming Tutorials и дважды щелкните ее.
- Назовите свой файл styles.css и нажмите кнопку Сохранить .
Вы создали пустую таблицу стилей CSS . Как и файл index.html в вашем проекте, в этом файле и текстовом файле нет ничего принципиально нового; расширение файла является единственным реальным отличием.
Кроме того, так же, как index.html был популярным соглашением об именах для домашней страницы веб-сайта, styles.css является популярным соглашением об именах для основной таблицы стилей веб-страницы. Вы можете называть это как угодно, но чаще всего выбирают styles.css.
Напишите свой первый CSS
Теперь, когда у вас есть пустая таблица стилей styles.css, открытая в текстовом редакторе, вы можете написать свой первый CSS. Введите или скопируйте следующий код в пустую таблицу стилей и сохраните его:
р {
красный цвет;
} Этот набор правил нацелен на каждый элемент
Соединение HTML и CSS
Прежде чем ваши HTML и CSS смогут работать вместе, два файла — index.
html и styles.css — должны быть связаны друг с другом. Выполните следующие действия, чтобы прикрепить таблицу стилей CSS к HTML-документу:
- В Sublime Text откройте файл index.html .
- Найдите элемент
</code> прямо сейчас.</li><li> Внутри элемента <code><head> </code> добавьте новый элемент: <pre> <link rel="stylesheet" href="styles.css"> </pre></li></ol><p> Как и другие элементы, входящие в элемент <code><head> </code>, элемент <code><link> </code> фактически не будет отображаться на странице. Вместо этого он <strong> определяет связь между двумя отдельными файлами </strong> с использованием двух HTML-атрибутов: <br/></p><ul><li> <strong> rel </strong> : атрибут <strong> rel </strong> указывает связь между двумя файлами. В данном случае это отношение «таблица стилей», потому что файл, на который вы ссылаетесь, является таблицей стилей CSS.<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/luxe-host.ru/wp-content/uploads/3/e/e/3ee3865f575e2afe66ee6b1d37446de9.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/3/e/e/3ee3865f575e2afe66ee6b1d37446de9.jpeg' /></noscript></li><li> <strong> href </strong> : как и элемент <code> <a> </code>, элемент <code><link> </code> также включает <strong> href </strong> (гипертекстовую ссылку), указывающую на файл, который вы хотите связать. Поскольку все ваши файлы находятся в одной папке, вы можете просто использовать имя файла, чтобы указать на него. Однако вы также можете использовать полный путь к файлу (C:\Users\You\styles.css) или веб-адрес (https://yoursite.com/styles.css), если ваш файл styles.css хранится в другом месте.</li></ul><h5><span class="ez-toc-section" id="_-_CSS"> Просмотр веб-страницы с помощью CSS </span></h5><p> После добавления элемента <code><link> </code> внутрь элемента <code><head> </code> <strong> сохраните файл index.html </strong>, и вы сможете просматривать изменения в браузере. Просто выполните следующие действия:</p><ol><li> Откройте <strong> File Explorer </strong> или <strong> Finder </strong> .</li><li> Перейдите к своему проекту <strong> GCF Programming Tutorials </strong> и нажмите внутри.</li><li> Дважды щелкните файл <strong> index.<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/luxe-host.ru/wp-content/uploads/3/4/1/341136cda188c9281ff7bc815bd2ea83.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/3/4/1/341136cda188c9281ff7bc815bd2ea83.jpeg' /></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/css/css-font-stretch-font-stretch-css-cascading-style-sheets.html" rel="prev">Css font stretch: font-stretch — CSS: Cascading Style Sheets</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/czvetnoj-fon-s-perehodami-fon-s-perehodom-czveta-59-foto.html" rel="next">Цветной фон с переходами: Фон с переходом цвета — 59 фото</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/kak-css-prikrepit-k-html-podklyuchenie-stilej-css-k-html-dokumentu-kak-podklyuchit-css-fajl.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='48249' 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></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 - 2025 | Все права защищены.</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_a5525df7354e9c4926a53db2b62ba665.js"></script></body></html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>