| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout_book [2024/03/08 21:14] – [14. Архив файлов примера] 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> |
| :# | :# |
| |
| |
| |
| ====2. Блок header==== | |
| В блок заголовка <header> запишем следующие элементы блоков (контейнеров): логотип, кнопки меню и поиска по сайту, и открыв "Пояснительную записку блока <header>" разберем данный код: | |
| |
| <code html HTML> | |
| <header> | |
| <!--начало блока логотип/меню веб страницы--> | |
| <nav class="container"> | |
| <a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a> | |
| <div class="nav-toggle"><span></span></div> | |
| <form action="" method="get" id="searchform"> | |
| <input type="text" placeholder="search..."> | |
| <button type="submit"><i class="fa fa-search"></i></button> | |
| </form> | |
| <ul id="menu"> | |
| <li><a href="">Features</a></li> | |
| <li><a href="">Download</a></li> | |
| <li><a href="">Support</a></li> | |
| </ul> | |
| </nav> | |
| <!--конец блока логотип/меню веб страницы--> | |
| </header> | |
| </code> | |
| #:Пояснительную записку блока <header> | |
| - **%%<header>%%** <color #22b14c>- открывающий тег блока.</color> | |
| - **%%<nav class="container">%%** <color #22b14c>- начало нашего блока колонтитула.</color> | |
| - **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** <color #22b14c>- блок логотипа с указанием месторасположения иконки.</color> | |
| - **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** <color #22b14c>- блок кнопки показа/скрытия главного меню.</color> | |
| - **%%<form action="" method="get" id="searchform">%%** <color #22b14c>- начало блока формы поиска</color>. | |
| - **%%<input type="text" placeholder="search...">%%** <color #22b14c>- форма ввода текста поиска.</color> | |
| - **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** <color #22b14c>- кнопка-иконка поиска по сайту.</color> | |
| - **%%</form>%%** <color #22b14c>- закрывающий тег формы поиска.</color> | |
| - **%%<ul id="menu">%%** <color #22b14c>- блок главного меню.</color> | |
| - **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Features".</color> | |
| - **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Download".</color> | |
| - **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Support".</color> | |
| - **%%</ul>%%** <color #22b14c>- конец блок главного меню.</color> | |
| - **%%</nav>%%** <color #22b14c>- конец нашего блока колонтитула.</color> | |
| - **%%</header>%%** <color #22b14c>- закрывающий тег блока.</color> | |
| :# | |
| ====3. Блок main ==== | ====3. Блок main ==== |
| В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: | В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: |
| </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> |
| :# | :# |
| ====5. Блок <footer>==== | |
| В подвале страницы разместим информацию о копирайте и открыв "Пояснительную записку блока <footer>" разберем данный код: | |
| |
| <code html HTML> | |
| <!--начало контейнера подвал веб страницы--> | |
| <footer> | |
| <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div> | |
| </footer> | |
| <!--конец контейнера подвал веб страницы--> | |
| </body> | |
| </html> | |
| <!--конец веб страницы--> | |
| </code> | |
| #:Пояснительная записка блока <footer>: | |
| - **%%<footer>%%** <color #22b14c>- начало блока "подвал".</color> | |
| - **%%<div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>%%** <color #22b14c>- блок текста копирайта.</color> | |
| - **%%</footer>%%** <color #22b14c>- конец блока "подвал".</color> | |
| - **%%</body>%%** <color #22b14c>- конец блока хранения содержания веб-страницы (контента).</color> | |
| - **%%</html>%%** <color #22b14c>- закрывающий тег, является концам блока (контейнера), который заключает в себе все содержимое веб-страницы.</color> | |
| :# | |
| ====6. Общие CSS-стили==== | ====6. Общие CSS-стили==== |
| Все нижеприведенные стили вынесены в один внешний файл CSS. | Все нижеприведенные стили вынесены в один внешний файл CSS. |
| </code> | </code> |
| |
| ====9. Стили блока aside==== | |
| |
| <code css CSS> | |
| /* правый контейнер */ | |
| aside { | |
| width: 33%;/*ширина блока*/ | |
| float: right;/*элемент выравнивается по правой стороне*/ | |
| } | |
| /* блок для виджетов */ | |
| .widget { | |
| padding: 20px 15px;/* значение полей вокруг содержимого*/ | |
| background: #dcdcdc;/* цвет блока для виджетов */ | |
| font-size: 13px;/* размер шрифта элемента */ | |
| margin-bottom: 30px;/*отступ от нижнего края элемента*/ | |
| box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */ | |
| } | |
| .widget-title { | |
| font-size: 15px;/* размер шрифта элемента */ | |
| padding: 10px;/* значение полей вокруг содержимого*/ | |
| margin-bottom: 10px;/* отступ от рамки блоков */ | |
| text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ | |
| border: 2px solid #2f4f4f;/* цвет рамки категорий */ | |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */ | |
| } | |
| .widget-category-list li { | |
| border-bottom: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока категорий */ | |
| padding: 8px 0;/* значение полей вокруг содержимого*/ | |
| color: #2f4f4f;/* цвет текста количества постов в категории*/ | |
| font-style: arial; /* шрифт текста наименования постов в категории*/ | |
| } | |
| .widget-category-list li:last-child { | |
| border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/ | |
| } | |
| .widget-category-list li a { | |
| color: #2f4f4f;/* цвет текста наименований категорий постов*/ | |
| margin-right: 20px;/* отступ от текста наименований категорий постов */ | |
| font-style: normal;/*обычное начертание текста*/ | |
| } | |
| .widget-category-list li a:before { | |
| content: "\f105"; /* стрелки перед текстом наименований категорий постов*/ | |
| display: inline-block;/*элемент обтекает другими элементами страницы*/ | |
| font-family: 'FontAwesome';/*шрифты колекции иконок FontAwesome*/ | |
| margin-right: 10px;/*отступа от правого края элемента*/ | |
| color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/ | |
| } | |
| .widget-posts-list li { | |
| border-top: 1.5px solid #2f4f4f;/* цвет и размер полос разделителей блока постов */ | |
| padding: 8px 0;/* значение полей вокруг содержимого*/ | |
| } | |
| .widget-posts-list li:nth-child(1) { | |
| border-top: none;/* цвет и размер полос разделителей блока постов отсутствует*/ | |
| } | |
| .post-image-small { | |
| width: 60%; /*размер - ширина картинки*/ | |
| float: left;/*положение картинки -элемент выравнивается по левой стороне*/ | |
| margin-right: 15px;/*отступ от правого края картинки*/ | |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */ | |
| } | |
| .widget-post-title { | |
| float: left;/*элемент выравнивается по левой стороне*/ | |
| } | |
| </code> | |
| |
| ====10. Стили блока footer==== | ====10. Стили блока footer==== |
| </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}} |
