| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout_book [2024/03/08 21:17] – [5. Блок <footer>] vladpolskiy | software:development:demo:responsive_site_layout_book [2025/12/06 19:45] (текущий) – внешнее изменение 127.0.0.1 |
|---|
| |
| =====Пример сайта===== | =====Пример сайта===== |
| Пример сайта выполненного в [[https://book51.ru/demo/code/book/index.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/demo/code/book/index.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. | Пример сайта выполненного в [[https://wwoss.ru/demo/code/book/index.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://wwoss.ru/demo/code/book/index.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. |
| |
| <html> | <html> |
| <div class="text"><img src="images/text.png" ></div> | <div class="text"><img src="images/text.png" ></div> |
| <div class="content"><img src="images/top.jpg" > | <div class="content"><img src="images/top.jpg" > |
| <div class="image-php"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:php:php_setting"><img src="images/php.png" alt="regular pyramid built from four equilateral triangles"></a></div> | <div class="image-php"><a href="https://wwoss.ru/doku.php?id=software:development:ps_pycharm:php:php_setting"><img src="images/php.png" alt="regular pyramid built from four equilateral triangles"></a></div> |
| <div class="image-mysql"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/mysql.jpg" ></a></div> | <div class="image-mysql"><a href="https://wwoss.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/mysql.jpg" ></a></div> |
| <div class="image-html5"><a href="https://book51.ru/doku.php?id=software:development:web:docs:web:html:attributes"><img src="images/html5.jpg" ></a></div> | <div class="image-html5"><a href="https://wwoss.ru/doku.php?id=software:development:web:docs:web:html:attributes"><img src="images/html5.jpg" ></a></div> |
| <div class="image-css"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/css.jpg" ></a></div> | <div class="image-css"><a href="https://wwoss.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/css.jpg" ></a></div> |
| <div class="image-js"><a href="https://book51.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/js.jpg" ></a></div> | <div class="image-js"><a href="https://wwoss.ru/doku.php?id=software:development:ps_pycharm:mysql:mysql"><img src="images/js.jpg" ></a></div> |
| </div> | </div> |
| </div> | </div> |
| |
| #: Пояснительная записка блока <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="blender3d_demo/images/favicon.ico" rel="shortcut icon">%%** <color #22b14c>- иконка страницы на вкладке браузера.</color> | - **%%<link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon">%%** <fc #22b14c>- иконка страницы на вкладке браузера.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color> | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <color #22b14c>- подключение библиотеки векторных иконок.</color> | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/v4-shims.css" rel="stylesheet">%%** <fc #22b14c>- подключение библиотеки векторных иконок.</fc> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">%%** <color #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</color> | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">%%** <fc #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</fc> |
| - **%%<script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>%%** <color #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</color> | - **%%<script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>%%** <fc #22b14c>- подключение библиотеки с набором функций **JavaScript**, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций).</fc> |
| - **%%<script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <color #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</color> | - **%%<script src="blender3d_demo/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.ogv" type='video/ogg; codecs="theora, vorbis"'>%%** |
| - **%%<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).mp4" type='video/mp4; codecs="avc1.42E01E, mp4"'>%%** <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> |
| :# | :# |
| ====4. Блок <aside> ==== | ====4. Блок <aside> ==== |
| </code> | </code> |
| #:«Пояснительная записка блока <aside> | #:«Пояснительная записка блока <aside> |
| - **%%<aside>%%** <color #22b14c>- начало контейнера контента правой колонки веб страницы.</color> | - **%%<aside>%%** <fc #22b14c>- начало контейнера контента правой колонки веб страницы.</fc> |
| - **%%<div class="widget">%%** <color #22b14c>- начало блока категорий.</color> | - **%%<div class="widget">%%** <fc #22b14c>- начало блока категорий.</fc> |
| - **%%<h3 class="widget-title">Categories</h3>%%** <color #22b14c>- блок с рамкой и названием "Категории"</color> | - **%%<h3 class="widget-title">Categories</h3>%%** <fc #22b14c>- блок с рамкой и названием "Категории"</fc> |
| - **%%<ul class="widget-category-list">%%** <color #22b14c>- начало блока перечислений категорий.</color> | - **%%<ul class="widget-category-list">%%** <fc #22b14c>- начало блока перечислений категорий.</fc> |
| - **%%<li><a href="">Features</a>(3)</li>%%** <color #22b14c>- блок категории "Features" с указанием количества статей.</color> | - **%%<li><a href="">Features</a>(3)</li>%%** <fc #22b14c>- блок категории "Features" с указанием количества статей.</fc> |
| - **%%<li><a href="">Download</a>(2)</li>%%** <color #22b14c>- блок категории "Download" с указанием количества статей.</color> | - **%%<li><a href="">Download</a>(2)</li>%%** <fc #22b14c>- блок категории "Download" с указанием количества статей.</fc> |
| - **%%<li><a href="">Support</a>(1)</li>%%** <color #22b14c>- блок категории "Support" с указанием количества статей.</color> | - **%%<li><a href="">Support</a>(1)</li>%%** <fc #22b14c>- блок категории "Support" с указанием количества статей.</fc> |
| - **%%</ul>%%** <color #22b14c>- конец блока перечислений категорий.</color> | - **%%</ul>%%** <fc #22b14c>- конец блока перечислений категорий.</fc> |
| - **%%</div>%%** - конец блока категорий. | - **%%</div>%%** - конец блока категорий. |
| - **%%<div class="widget">%%** <color #22b14c>- начало блока анонсов статей.</color> | - **%%<div class="widget">%%** <fc #22b14c>- начало блока анонсов статей.</fc> |
| - **%%<h3 class="widget-title">The last notes</h3>%%** <color #22b14c>- блок с рамкой и названием "Последние записи".</color> | - **%%<h3 class="widget-title">The last notes</h3>%%** <fc #22b14c>- блок с рамкой и названием "Последние записи".</fc> |
| - **%%<ul class="widget-posts-list">%%** <color #22b14c>- начало блока анонсов статей "Последние записи".</color> | - **%%<ul class="widget-posts-list">%%** <fc #22b14c>- начало блока анонсов статей "Последние записи".</fc> |
| - **%%<li>%%** <color #22b14c>- начало блока анонса статьи (для остальных статей идентично этому блоку).</color> | - **%%<li>%%** <fc #22b14c>- начало блока анонса статьи (для остальных статей идентично этому блоку).</fc> |
| - **%%<div class="post-image-small">%%** <color #22b14c>- начало блока вставки картинки анонса статьи.</color> | - **%%<div class="post-image-small">%%** <fc #22b14c>- начало блока вставки картинки анонса статьи.</fc> |
| - **%%<a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>%%** <color #22b14c>- вставка картинки с указанием месторасположения.</color> | - **%%<a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>%%** <fc #22b14c>- вставка картинки с указанием месторасположения.</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока вставки картинки анонса статьи.</color> | - **%%</div>%%** <fc #22b14c>- конец блока вставки картинки анонса статьи.</fc> |
| - **%%<h3>Cycles</h3>%%** **is Blender’s built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering. · Real-time viewport preview· CPU & GPU rendering· PBR shaders & HDR lighting support· VR rendering support** <color #22b14c>- заголовок и текст анонса статьи.</color> | - **%%<h3>Cycles</h3>%%** **is Blender’s built-in powerful unbiased path-tracer engine that offers stunning ultra-realistic rendering. · Real-time viewport preview· CPU & GPU rendering· PBR shaders & HDR lighting support· VR rendering support** <fc #22b14c>- заголовок и текст анонса статьи.</fc> |
| - **%%</li>%%** <color #22b14c>- конец блока анонса статьи (для остальных статей идентично этому блоку).</color> | - **%%</li>%%** <fc #22b14c>- конец блока анонса статьи (для остальных статей идентично этому блоку).</fc> |
| - **%%</ul>%%** <color #22b14c>- конец блока анонсов статей "Последние записи".</color> | - **%%</ul>%%** <fc #22b14c>- конец блока анонсов статей "Последние записи".</fc> |
| - **%%</div>%%** <color #22b14c>- конец блока анонсов статей.</color> | - **%%</div>%%** <fc #22b14c>- конец блока анонсов статей.</fc> |
| - **%%</aside>%%** <color #22b14c>- конец контейнера контента правой колонки веб страницы.</color> | - **%%</aside>%%** <fc #22b14c>- конец контейнера контента правой колонки веб страницы.</fc> |
| - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> | - **%%</div>%%** <fc #22b14c>- конец контейнера всего контента веб страницы.</fc> |
| :# | :# |
| |
| </code> | </code> |
| #: Пояснительная записка | #: Пояснительная записка |
| - **%%<script src="blender3d_demo/js/blender3d_demo.js">%%** <color #22b14c>- начало подключение файла скрипта с указанием папки месторасположения.</color> | - **%%<script src="blender3d_demo/js/blender3d_demo.js">%%** <fc #22b14c>- начало подключение файла скрипта с указанием папки месторасположения.</fc> |
| - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color> | - **%%</script>%%** <fc #22b14c>- конец подключение файла скрипта.</fc> |
| :# | :# |
| ====13. Код скрипта для мобильного меню==== | |
| Данный скрипт работает при ширине окна браузера менее 768px, откройте "Пояснительную записку" для понимания кода скрипта. | |
| |
| |
| <code javascript JS> | |
| $('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| }); | |
| </code> | |
| #: Пояснительная записка | |
| - **%%$('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> | |
| :# | |
| ====14. Архив файлов примера==== | ====14. Архив файлов примера==== |
| Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ | Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ |
| <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ | <fc #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</fc>\\ |
| {{:software:development:demo:book.rar|rar arhiv book 409kb}} | {{:software:development:demo:book.rar|rar arhiv book 409kb}} |
