| Следующая версия | Предыдущая версия |
| software:development:demo:adaptive_registration_form [2024/03/02 20:36] – создано vladpolskiy | software:development:demo:adaptive_registration_form [2025/02/01 08:50] (текущий) – внешнее изменение 127.0.0.1 |
|---|
| ======Адаптивную форма регистрации====== | ======Адаптивную форма регистрации====== |
| {{:software:development:demo:adaptive_registration_form_1.png?550 |}} | {{:software:development:demo:adaptive_registration_form_1.png?550 |}} |
| | =====Пример===== |
| | |
| | Пример можно посмотреть [[https://book51.ru/demo/code/adaptive_registration_form/index.html|по этой ссылке.]] |
| |
| <html> | <html> |
| <iframe height="1330" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/adaptive_registration_form/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> | <iframe height="650" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code/adaptive_registration_form/index.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> |
| </iframe> | </iframe> |
| </html> | </html> |
| |
| #: Пояснительная записка блока <head>: | #: Пояснительная записка блока <head>: |
| - **%%<!DOCTYPE html>%%** <color #22b14c>- указания типа текущего документа (HTML5).</color> | - **%%<!DOCTYPE html>%%** <fc #22b14c>- указания типа текущего документа (HTML5).</fc> |
| - **%%<html>%%** <color #22b14c>- открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.</color> | - **%%<html>%%** <fc #22b14c>- открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.</fc> |
| - **%%<head>%%** <color #22b14c>- открывающий тег блока , содержащего машиночитаемую информацию (metadata).</color> | - **%%<head>%%** <fc #22b14c>- открывающий тег блока , содержащего машиночитаемую информацию (metadata).</fc> |
| - **%%<meta charset="utf-8">%%** <color #22b14c>- указывает кодировку документа.</color> | - **%%<meta charset="utf-8">%%** <fc #22b14c>- указывает кодировку документа.</fc> |
| - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** <color #22b14c>- сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).</color> | - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** <fc #22b14c>- сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).</fc> |
| - **%%<title>Responsive site layout</title>%%** <color #22b14c>- заголовок страницы на вкладке браузера.</color> | - **%%<title>Responsive site layout</title>%%** <fc #22b14c>- заголовок страницы на вкладке браузера.</fc> |
| - **%%<link type="Image/x-icon" href="template/images/favicon.ico" rel="shortcut icon">%%** <color #22b14c>- иконка страницы на вкладке браузера.</color> | - **%%<link type="Image/x-icon" href="template/images/favicon.ico" rel="shortcut icon">%%** <fc #22b14c>- иконка страницы на вкладке браузера.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color> | - **%%<link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color> | - **%%<link rel="stylesheet" type="text/css" href="template/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="template/css/notebook.css">%%** <color #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</color> | - **%%<link rel="stylesheet" type="text/css" href="template/css/notebook.css">%%** <fc #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</fc> |
| - **%%<script src="template/js/jquery/2.2.2/jquery.min.js"></script>%%** <color #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</color> | - **%%<script src="template/js/jquery/2.2.2/jquery.min.js"></script>%%** <fc #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</fc> |
| - **%%<script src="template/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <color #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</color> | - **%%<script src="template/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <fc #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</fc> |
| - **%%</head>%%** <color #22b14c>- закрывающий тег блока.</color> | - **%%</head>%%** <fc #22b14c>- закрывающий тег блока.</fc> |
| :# | :# |
| |
| </code> | </code> |
| #:Пояснительная записка блока main: | #:Пояснительная записка блока main: |
| - **%%<body>%%** <color #22b14c>- начало блока хранения содержания веб-страницы (контента).</color> | - **%%<body>%%** <fc #22b14c>- начало блока хранения содержания веб-страницы (контента).</fc> |
| - **%%<div class="container">%%** <color #22b14c>- начало контейнера контента веб страницы.</color> | - **%%<div class="container">%%** <fc #22b14c>- начало контейнера контента веб страницы.</fc> |
| - **%%<div class="posts-list">%%** <color #22b14c>- начало контейнера с анонсом статей.</color> | - **%%<div class="posts-list">%%** <fc #22b14c>- начало контейнера с анонсом статей.</fc> |
| - **%%<article id="post-1" class="post">%%** <color #22b14c>- начало контейнера с анонсом 1й статьи.</color> | - **%%<article id="post-1" class="post">%%** <fc #22b14c>- начало контейнера с анонсом 1й статьи.</fc> |
| - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</color>png" ></a></div>%%** <color #22b14c>- блок вставки картинки с указанием месторасположения файла.</color> | - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</fc>png" ></a></div>%%** <fc #22b14c>- блок вставки картинки с указанием месторасположения файла.</fc> |
| - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 1й статьи.</color> | - **%%<div class="post-content">%%** <fc #22b14c>- начало блока текстовой информации 1й статьи.</fc> |
| - **%%<div class="category"><a href="">Features</a></div>%%** <color #22b14c>- блок указания категории 1й статьи.</color> | - **%%<div class="category"><a href="">Features</a></div>%%** <fc #22b14c>- блок указания категории 1й статьи.</fc> |
| - **%%<h2 class="post-title">Blender 3.</color>6 LTS</h2>%%** <color #22b14c>- блок заголовка 1й статьи.</color> | - **%%<h2 class="post-title">Blender 3.</fc>6 LTS</h2>%%** <fc #22b14c>- блок заголовка 1й статьи.</fc> |
| - **%%<p>%%**Blender 3D program Blender is one of the most popular 3D modeling software. This is a multifunctional software, acquaintance with which will be useful for those who are interested in 3d graphics and who want to understand the basic principles of this industry.</color> - **%%</p>%%** <color #22b14c>- блок текста 1й статьи.</color> | - **%%<p>%%**Blender 3D program Blender is one of the most popular 3D modeling software. This is a multifunctional software, acquaintance with which will be useful for those who are interested in 3d graphics and who want to understand the basic principles of this industry.</fc> - **%%</p>%%** <fc #22b14c>- блок текста 1й статьи.</fc> |
| - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 1й статьи.</color> | - **%%<div class="post-footer">%%** <fc #22b14c>- начало блока "Читать далее" 1й статьи.</fc> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> | - **%%<a class="more-link" href="">Continue Reading</a>%%** <fc #22b14c>- блок надписи "Читать далее" 2й статьи.</fc> |
| - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> | - **%%<div class="post-social">%%** <fc #22b14c>- начало блока иконок-ссылок социальных сетей.</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> | - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <fc #22b14c>- иконка-ссылка "facebook".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> | - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <fc #22b14c>- иконка-ссылка "twitter".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> | - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <fc #22b14c>- иконка-ссылка "pinterest".</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> | - **%%</div>%%** <fc #22b14c>- конец блока иконок-ссылок социальных сетей.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 1й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока "Читать далее" 1й статьи.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 1й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока текстовой информации 1й статьи.</fc> |
| - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 1й статьи.</color> | - **%%</article>%%** <fc #22b14c>- конец контейнера с анонсом 1й статьи.</fc> |
| - **%%<article id="post-2" class="post">%%** <color #22b14c>- начало контейнера с анонсом 2й статьи.</color> | - **%%<article id="post-2" class="post">%%** <fc #22b14c>- начало контейнера с анонсом 2й статьи.</fc> |
| - **%%<div class="post-image"><a href="">%%** <color #22b14c>- начало блока вставки видеофайла с указанием месторасположения.</color> | - **%%<div class="post-image"><a href="">%%** <fc #22b14c>- начало блока вставки видеофайла с указанием месторасположения.</fc> |
| - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.</color>jpg">%%** <color #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</color> | - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.</fc>jpg">%%** <fc #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</fc> |
| - **%%<source src="video/duel.</color>ogv" type='video/ogg; codecs="theora, vorbis"'>%%** <color #22b14c>- | - **%%<source src="video/duel.</fc>ogv" type='video/ogg; codecs="theora, vorbis"'>%%** <fc #22b14c>- |
| - **%%<source src="blender3d_demo/vesna(720p).</color>mp4" type='video/mp4; codecs="avc1.</color>42E01E, mp4a.</color>40.</color>2"'>%%** <color #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</color> | - **%%<source src="blender3d_demo/vesna(720p).</fc>mp4" type='video/mp4; codecs="avc1.</fc>42E01E, mp4a.</fc>40.</fc>2"'>%%** <fc #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</fc> |
| - **%%</video>%%** <color #22b14c>- закрывающий тег вставки видеофайла.</color> | - **%%</video>%%** <fc #22b14c>- закрывающий тег вставки видеофайла.</fc> |
| - **%%</a></div>%%** <color #22b14c>- конец блока вставки видеофайла с указанием месторасположения.</color> | - **%%</a></div>%%** <fc #22b14c>- конец блока вставки видеофайла с указанием месторасположения.</fc> |
| - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 2й статьи.</color> | - **%%<div class="post-content">%%** <fc #22b14c>- начало блока текстовой информации 2й статьи.</fc> |
| - **%%<div class="category"><a href="">Download</a></div>%%** <color #22b14c>- блок указания категории 2й статьи.</color> | - **%%<div class="category"><a href="">Download</a></div>%%** <fc #22b14c>- блок указания категории 2й статьи.</fc> |
| - **%%<h2 class="post-title">Spring</h2>%%** <color #22b14c>- блок заголовка 2й статьи.</color> | - **%%<h2 class="post-title">Spring</h2>%%** <fc #22b14c>- блок заголовка 2й статьи.</fc> |
| - **%%<p>%%**Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.**%%</p>%%** <color #22b14c>- блок текста 2й статьи.</color> | - **%%<p>%%**Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.**%%</p>%%** <fc #22b14c>- блок текста 2й статьи.</fc> |
| - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 2й статьи.</color> | - **%%<div class="post-footer">%%** <fc #22b14c>- начало блока "Читать далее" 2й статьи.</fc> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> | - **%%<a class="more-link" href="">Continue Reading</a>%%** <fc #22b14c>- блок надписи "Читать далее" 2й статьи.</fc> |
| - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> | - **%%<div class="post-social">%%** <fc #22b14c>- начало блока иконок-ссылок социальных сетей.</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> | - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <fc #22b14c>- иконка-ссылка "facebook".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> | - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <fc #22b14c>- иконка-ссылка "twitter".</fc> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> | - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <fc #22b14c>- иконка-ссылка "pinterest".</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> | - **%%</div>%%** <fc #22b14c>- конец блока иконок-ссылок социальных сетей.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 2й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока "Читать далее" 2й статьи.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 2й статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока текстовой информации 2й статьи.</fc> |
| - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 2й статьи.</color> | - **%%</article>%%** <fc #22b14c>- конец контейнера с анонсом 2й статьи.</fc> |
| - **%%</div>%%** <color #22b14c>- конец контейнера с анонсом статей.</color> | - **%%</div>%%** <fc #22b14c>- конец контейнера с анонсом статей.</fc> |
| :# | :# |
