| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout [2023/09/06 06:49] – [5. Блок <footer>] vladpolskiy | software:development:demo:responsive_site_layout [2024/01/26 21:19] (текущий) – [Пример сайта] vladpolskiy |
|---|
| Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. | Адаптивная верстка сайта (от английского, responsive web design, иногда — adaptive web design) — это создание структуры HTML-документа на базе HTML-разметки, предусматривающей автоматическую адаптацию веб-страницы в зависимости от размера экрана устройства пользователя. Иными словами - это макет веб-страницы, автоматически подстраивающийся под размер экрана разнообразных гаджетов пользователя, таких как планшеты и смартфоны. |
| {{:software:development:demo:blender3d_demo_0.jpg?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. | {{:software:development:demo:blender3d_demo_0.jpg?550 |}} В адаптивной вёрстка предполагается использование современных технологий, делающих основные элементы, изменяющими свой размер и расположение на странице, исходя из ширины окна. При этом отсутствуют и полосы прокрутки. Для просмотра контента достаточно просто листать страницы вниз. Для отображения на смартфонах и планшетах лишние элементы отсеивают: убирают графические объекты, сворачивают меню, оставляя только самые значимые блоки. Параллельно увеличивается размер элементов управления, чтобы нужную кнопку без труда можно было нажать пальцем, ведь на обычном сайте попасть по ссылке с первого раза удается не всегда. Все это достигается с помощью медиа-запросов, которые лежат в основе данной технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий, управляя компоновкой и расположением блоков на странице, автоматически преобразуя шаблон. |
| Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. | Данная статья рассматривает применение адаптивной резиновой вёрстки при создании главной страницы. Основные примеры создания приведены в статье [[software:development:web:docs:learn:css:css_layout:responsive_design|Отзывчивый дизайн]]. |
| |
| =====Шаблон страницы при верстки===== | =====Шаблон страницы при верстки===== |
| |
| =====Пример сайта===== | =====Пример сайта===== |
| Пример сайта выполненного в [[https://book51.ru/wiki/demo/code/blender3d_demo.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/wiki/demo/code/blender3d_demo.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. | Пример сайта выполненного в [[https://book51.ru/demo/code/blender3d_demo.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/demo/code/blender3d_demo.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства. |
| |
| <html> | <html> |
| |
| #: Пояснительная записка блока <head>: | #: Пояснительная записка блока <head>: |
| - **%%<!DOCTYPE html>%%** - указания типа текущего документа (HTML5). | - **%%<!DOCTYPE html>%%** <color #22b14c>- указания типа текущего документа (HTML5).</color> |
| - **%%<html>%%** - открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы. | - **%%<html>%%** <color #22b14c>- открывающий тег, является началом блока (контейнера), который заключает в себе все содержимое веб-страницы.</color> |
| - **%%<head>%%** - открывающий тег блока , содержащего машиночитаемую информацию (metadata). | - **%%<head>%%** <color #22b14c>- открывающий тег блока , содержащего машиночитаемую информацию (metadata).</color> |
| - **%%<meta charset="utf-8">%%** - указывает кодировку документа. | - **%%<meta charset="utf-8">%%** <color #22b14c>- указывает кодировку документа.</color> |
| - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** - сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1). | - **%%<meta name="viewport" content="width=device-width, initial-scale=1">%%** <color #22b14c>- сообщение браузеру, что ширина страницы равна ширине устройства, с которого эта страница просматривается. (width(ширина сайта) = device-width(ширина устройства) и масштаб: 1).</color> |
| - **%%<title>Responsive site layout</title>%%** - заголовок страницы на вкладке браузера. | - **%%<title>Responsive site layout</title>%%** <color #22b14c>- заголовок страницы на вкладке браузера.</color> |
| - **%%<link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon">%%** - иконка страницы на вкладке браузера. | - **%%<link type="Image/x-icon" href="blender3d_demo/images/favicon.ico" rel="shortcut icon">%%** <color #22b14c>- иконка страницы на вкладке браузера.</color> |
| - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/Font-Awesome-6.x/css/all.css" rel="stylesheet">%%** - подключение библиотеки векторных иконок | - **%%<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/v4-shims.css" rel="stylesheet">%%** - подключение библиотеки векторных иконок | - **%%<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/blender3d_demo.css">%%** - подключение внешней таблицы стилей CSS описанный ниже. | - **%%<link rel="stylesheet" type="text/css" href="blender3d_demo/css/blender3d_demo.css">%%** <color #22b14c>- подключение внешней **таблицы стилей CSS** описанный ниже.</color> |
| - **%%<script src="blender3d_demo/js/jquery/2.2.2/jquery.min.js"></script>%%** - подключение библиотеки с набором функций JavaScript, фокусирующийся на взаимодействии JavaScript и HTML. (min - минимальный набор функций). | - **%%<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/prefixfree/1.0.7/prefixfree.min.js"></script>%%** - подключение плагина prefixfree, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы. | - **%%<script src="blender3d_demo/js/prefixfree/1.0.7/prefixfree.min.js"></script>%%** <color #22b14c>- подключение плагина **prefixfree**, дающего возможность исключать префиксы, у свойств таблицы CSS, которые еще не до конца стандартизированы.</color> |
| - **%%</head>%%** - закрывающий тег блока | - **%%</head>%%** <color #22b14c>- закрывающий тег блока.</color> |
| :# | :# |
| |
| </code> | </code> |
| #:Пояснительную записку блока <header> | #:Пояснительную записку блока <header> |
| - **%%<header>%%** - открывающий тег блока. | - **%%<header>%%** <color #22b14c>- открывающий тег блока.</color> |
| - **%%<nav class="container">%%** - начало нашего блока колонтитула. | - **%%<nav class="container">%%** <color #22b14c>- начало нашего блока колонтитула.</color> |
| - **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** - блок логотипа с указанием месторасположения иконки. | - **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** <color #22b14c>- блок логотипа с указанием месторасположения иконки.</color> |
| - **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** - блок кнопки показа/скрытия главного меню. | - **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** <color #22b14c>- блок кнопки показа/скрытия главного меню.</color> |
| - **%%<form action="" method="get" id="searchform">%%** - начало блока формы поиска. | - **%%<form action="" method="get" id="searchform">%%** <color #22b14c>- начало блока формы поиска</color>. |
| - **%%<input type="text" placeholder="search...">%%** - форма ввода текста поиска. | - **%%<input type="text" placeholder="search...">%%** <color #22b14c>- форма ввода текста поиска.</color> |
| - **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** | - **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** <color #22b14c>- кнопка-иконка поиска по сайту.</color> |
| - **%%</form>%%** - закрывающий тег формы поиска. | - **%%</form>%%** <color #22b14c>- закрывающий тег формы поиска.</color> |
| - **%%<ul id="menu">%%** - блок главного меню. | - **%%<ul id="menu">%%** <color #22b14c>- блок главного меню.</color> |
| - **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** - кнопка меню "Features". | - **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Features".</color> |
| - **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** - кнопка меню "Download". | - **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Download".</color> |
| - **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** - кнопка меню "Support". | - **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Support".</color> |
| - **%%</ul>%%** - конец блок главного меню. | - **%%</ul>%%** <color #22b14c>- конец блок главного меню.</color> |
| - **%%</nav>%%** - конец нашего блока колонтитула. | - **%%</nav>%%** <color #22b14c>- конец нашего блока колонтитула.</color> |
| - **%%</header>%%** - закрывающий тег блока. | - **%%</header>%%** <color #22b14c>- закрывающий тег блока.</color> |
| :# | :# |
| ====3. Блок main ==== | ====3. Блок main ==== |
| </code> | </code> |
| #:Пояснительная записка блока main: | #:Пояснительная записка блока main: |
| - **%%<body>%%** - начало блока хранения содержания веб-страницы (контента). | - **%%<body>%%** <color #22b14c>- начало блока хранения содержания веб-страницы (контента).</color> |
| - **%%<div class="container">%%** - начало контейнера контента веб страницы. | - **%%<div class="container">%%** <color #22b14c>- начало контейнера контента веб страницы.</color> |
| - **%%<div class="posts-list">%%** - начало контейнера с анонсом статей. | - **%%<div class="posts-list">%%** <color #22b14c>- начало контейнера с анонсом статей.</color> |
| - **%%<article id="post-1" class="post">%%** - начало контейнера с анонсом 1й статьи. | - **%%<article id="post-1" class="post">%%** <color #22b14c>- начало контейнера с анонсом 1й статьи.</color> |
| - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.png" ></a></div>%%** - блок вставки картинки с указанием месторасположения файла. | - **%%<div class="post-image"><a href=""><img src="blender3d_demo/blender3d_demo_1.</color>png" ></a></div>%%** <color #22b14c>- блок вставки картинки с указанием месторасположения файла.</color> |
| - **%%<div class="post-content">%%** - начало блока текстовой информации 1й статьи. | - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 1й статьи.</color> |
| - **%%<div class="category"><a href="">Features</a></div>%%** - блок указания категории 1й статьи. | - **%%<div class="category"><a href="">Features</a></div>%%** <color #22b14c>- блок указания категории 1й статьи.</color> |
| - **%%<h2 class="post-title">Blender 3.6 LTS</h2>%%** - блок заголовка 1й статьи. | - **%%<h2 class="post-title">Blender 3.</color>6 LTS</h2>%%** <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. - **%%</p>%%** - блок текста 1й статьи. | - **%%<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> |
| - **%%<div class="post-footer">%%** - начало блока "Читать далее" 1й статьи. | - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 1й статьи.</color> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** - блок надписи "Читать далее" 2й статьи. | - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> |
| - **%%<div class="post-social">%%** - начало блока иконок-ссылок социальных сетей. | - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** - иконка-ссылка "facebook" | - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** - иконка-ссылка "twitter" | - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** - иконка-ссылка "pinterest" | - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> |
| - **%%</div>%%** - конец блока иконок-ссылок социальных сетей. | - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> |
| - **%%</div>%%** - конец блока "Читать далее" 1й статьи. | - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 1й статьи.</color> |
| - **%%</div>%%** - конец блока текстовой информации 1й статьи. | - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 1й статьи.</color> |
| - **%%</article>%%** - конец контейнера с анонсом 1й статьи. | - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 1й статьи.</color> |
| - **%%<article id="post-2" class="post">%%** - начало контейнера с анонсом 2й статьи. | - **%%<article id="post-2" class="post">%%** <color #22b14c>- начало контейнера с анонсом 2й статьи.</color> |
| - **%%<div class="post-image"><a href="">%%** - начало блока вставки видеофайла с указанием месторасположения. | - **%%<div class="post-image"><a href="">%%** <color #22b14c>- начало блока вставки видеофайла с указанием месторасположения.</color> |
| - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.jpg">%%** - начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения. | - **%%<video width="100%" controls="controls" poster="blender3d_demo/poster.</color>jpg">%%** <color #22b14c>- начало вставки видеофайла с указанием ширины, вставки панели управления, и файла-постера с указанием месторасположения.</color> |
| - **%%<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>%%** - | - **%%<source src="video/duel.</color>ogv" type='video/ogg; codecs="theora, vorbis"'>%%** <color #22b14c>- |
| - **%%<source src="blender3d_demo/vesna(720p).mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>%%** - месторасположение встраиваемо видеофайла с указанием кодеков. | - **%%<source src="blender3d_demo/vesna(720p).</color>mp4" type='video/mp4; codecs="avc1.</color>42E01E, mp4a.</color>40.</color>2"'>%%** <color #22b14c>- месторасположение встраиваемо видеофайла с указанием кодеков.</color> |
| - **%%</video>%%** - закрывающий тег вставки видеофайла. | - **%%</video>%%** <color #22b14c>- закрывающий тег вставки видеофайла.</color> |
| - **%%</a></div>%%** - конец блока вставки видеофайла с указанием месторасположения. | - **%%</a></div>%%** <color #22b14c>- конец блока вставки видеофайла с указанием месторасположения.</color> |
| - **%%<div class="post-content">%%** - начало блока текстовой информации 2й статьи. | - **%%<div class="post-content">%%** <color #22b14c>- начало блока текстовой информации 2й статьи.</color> |
| - **%%<div class="category"><a href="">Download</a></div>%%** - блок указания категории 2й статьи. | - **%%<div class="category"><a href="">Download</a></div>%%** <color #22b14c>- блок указания категории 2й статьи.</color> |
| - **%%<h2 class="post-title">Spring</h2>%%** - блок заголовка 2й статьи. | - **%%<h2 class="post-title">Spring</h2>%%** <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>%%** - блок текста 2й статьи. | - **%%<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> |
| - **%%<div class="post-footer">%%** - начало блока "Читать далее" 2й статьи. | - **%%<div class="post-footer">%%** <color #22b14c>- начало блока "Читать далее" 2й статьи.</color> |
| - **%%<a class="more-link" href="">Continue Reading</a>%%** - блок надписи "Читать далее" 2й статьи. | - **%%<a class="more-link" href="">Continue Reading</a>%%** <color #22b14c>- блок надписи "Читать далее" 2й статьи.</color> |
| - **%%<div class="post-social">%%** - начало блока иконок-ссылок социальных сетей. | - **%%<div class="post-social">%%** <color #22b14c>- начало блока иконок-ссылок социальных сетей.</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** - иконка-ссылка "facebook" | - **%%<a href="" target="_blank"><i class="fa fa-facebook"></i></a>%%** <color #22b14c>- иконка-ссылка "facebook".</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** - иконка-ссылка "twitter" | - **%%<a href="" target="_blank"><i class="fa fa-twitter"></i></a>%%** <color #22b14c>- иконка-ссылка "twitter".</color> |
| - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** - иконка-ссылка "pinterest" | - **%%<a href="" target="_blank"><i class="fa fa-pinterest"></i></a>%%** <color #22b14c>- иконка-ссылка "pinterest".</color> |
| - **%%</div>%%** - конец блока иконок-ссылок социальных сетей. | - **%%</div>%%** <color #22b14c>- конец блока иконок-ссылок социальных сетей.</color> |
| - **%%</div>%%** - конец блока "Читать далее" 2й статьи. | - **%%</div>%%** <color #22b14c>- конец блока "Читать далее" 2й статьи.</color> |
| - **%%</div>%%** - конец блока текстовой информации 2й статьи. | - **%%</div>%%** <color #22b14c>- конец блока текстовой информации 2й статьи.</color> |
| - **%%</article>%%** - конец контейнера с анонсом 2й статьи. | - **%%</article>%%** <color #22b14c>- конец контейнера с анонсом 2й статьи.</color> |
| - **%%</div>%%** - конец контейнера с анонсом статей. | - **%%</div>%%** <color #22b14c>- конец контейнера с анонсом статей.</color> |
| :# | :# |
| ====4. Блок <aside> ==== | ====4. Блок <aside> ==== |
| </code> | </code> |
| #:«Пояснительная записка блока <aside> | #:«Пояснительная записка блока <aside> |
| - **%%<aside>%%** - начало контейнера контента правой колонки веб страницы. | - **%%<aside>%%** <color #22b14c>- начало контейнера контента правой колонки веб страницы.</color> |
| - **%%<div class="widget">%%** - начало блока категорий. | - **%%<div class="widget">%%** <color #22b14c>- начало блока категорий.</color> |
| - **%%<h3 class="widget-title">Categories</h3>%%** - блок с рамкой и названием "Категории" | - **%%<h3 class="widget-title">Categories</h3>%%** <color #22b14c>- блок с рамкой и названием "Категории"</color> |
| - **%%<ul class="widget-category-list">%%** - начало блока перечислений категорий. | - **%%<ul class="widget-category-list">%%** <color #22b14c>- начало блока перечислений категорий.</color> |
| - **%%<li><a href="">Features</a>(3)</li>%%** - блок категории "Features" с указанием количества статей. | - **%%<li><a href="">Features</a>(3)</li>%%** <color #22b14c>- блок категории "Features" с указанием количества статей.</color> |
| - **%%<li><a href="">Download</a>(2)</li>%%** - блок категории "Download" с указанием количества статей. | - **%%<li><a href="">Download</a>(2)</li>%%** <color #22b14c>- блок категории "Download" с указанием количества статей.</color> |
| - **%%<li><a href="">Support</a>(1)</li>%%** - блок категории "Support" с указанием количества статей. | - **%%<li><a href="">Support</a>(1)</li>%%** <color #22b14c>- блок категории "Support" с указанием количества статей.</color> |
| - **%%</ul>%%** - конец блока перечислений категорий. | - **%%</ul>%%** <color #22b14c>- конец блока перечислений категорий.</color> |
| - **%%</div>%%** - конец блока категорий. | - **%%</div>%%** - конец блока категорий. |
| - **%%<div class="widget">%%** - начало блока анонсов статей. | - **%%<div class="widget">%%** <color #22b14c>- начало блока анонсов статей.</color> |
| - **%%<h3 class="widget-title">The last notes</h3>%%** - блок с рамкой и названием "Последние записи". | - **%%<h3 class="widget-title">The last notes</h3>%%** <color #22b14c>- блок с рамкой и названием "Последние записи".</color> |
| - **%%<ul class="widget-posts-list">%%** - начало блока анонсов статей "Последние записи". | - **%%<ul class="widget-posts-list">%%** <color #22b14c>- начало блока анонсов статей "Последние записи".</color> |
| - **%%<li>%%** - начало блока анонса статьи (для остальных статей идентично этому блоку). | - **%%<li>%%** <color #22b14c>- начало блока анонса статьи (для остальных статей идентично этому блоку).</color> |
| - **%%<div class="post-image-small">%%** - начало блока вставки картинки анонса статьи. | - **%%<div class="post-image-small">%%** <color #22b14c>- начало блока вставки картинки анонса статьи.</color> |
| - **%%<a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>%%** - вставка картинки с указанием месторасположения. | - **%%<a href=""><img src="blender3d_demo/blender3d_demo_2.jpg"></a>%%** <color #22b14c>- вставка картинки с указанием месторасположения.</color> |
| - **%%</div>%%** - конец блока вставки картинки анонса статьи | - **%%</div>%%** <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** - заголовок и текст анонса статьи. | - **%%<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> |
| - **%%</li>%%** - конец блока анонса статьи (для остальных статей идентично этому блоку). | - **%%</li>%%** <color #22b14c>- конец блока анонса статьи (для остальных статей идентично этому блоку).</color> |
| - **%%</ul>%%** - конец блока анонсов статей "Последние записи". | - **%%</ul>%%** <color #22b14c>- конец блока анонсов статей "Последние записи".</color> |
| - **%%</div>%%** - конец блока анонсов статей. | - **%%</div>%%** <color #22b14c>- конец блока анонсов статей.</color> |
| - **%%</aside>%%** - конец контейнера контента правой колонки веб страницы. | - **%%</aside>%%** <color #22b14c>- конец контейнера контента правой колонки веб страницы.</color> |
| - **%%</div>%%** - конец контейнера всего контента веб страницы. | - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> |
| :# | :# |
| ====5. Блок <footer>==== | ====5. Блок <footer>==== |
| :# | :# |
| ====6. Общие CSS-стили==== | ====6. Общие CSS-стили==== |
| Общие стили, сброс стилей браузера по умолчанию: | Все нижеприведенные стили вынесены в один внешний файл CSS. |
| |
| <code css CSS> | <code css CSS> |
| | /*сброс стилей браузера по умолчанию. */ |
| *, *:after, *:before { | *, *:after, *:before { |
| box-sizing: border-box; | box-sizing: border-box;/*ширины и высоты элемента(width и height = значения полей и границ, но не отступов (margin))*/ |
| padding: 0; | padding: 0;/*значение полей вокруг содержимого элемента*/ |
| margin: 0; | margin: 0;/*значение отступа от каждого края элемента*/ |
| transition: .5s ease-in-out; | transition: .5s ease-in-out;/*эффект анимации начинается и заканчивается медленно*/ |
| /* добавим плавность переходов для всех элементов страницы*/ | /*плавность переходов для всех элементов страницы*/ |
| } | } |
| ul { | ul { |
| list-style: none; | list-style: none;/*стиль маркера отменен*/ |
| } | } |
| a { | a { |
| text-decoration: none; | text-decoration: none;/*оформление текста отменено*/ |
| outline: none; | outline: none;/*цвет, стиль и толщина внешней границы отменены*/ |
| } | } |
| img { | img { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| width: 100%; | width: 100%;/*рисунок растянут на всю ширину веб-страницы*/ |
| } | } |
| h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { |
| font-family: 'Playfair Display'; | font-family: Geneva, Arial, Helvetica, sans-serif;/*шрифты для заголовка*/ |
| font-weight: normal; | font-weight: normal;/*обычная насыщенность шрифтов */ |
| letter-spacing: 1px; | letter-spacing: 1px;/*интервал между символами*/ |
| } | } |
| body { | body { |
| font-family: 'Open Sans', arial, sans-serif; | font-family: Geneva, Arial, Helvetica, sans-serif;/*шрифты для заголовка*/ |
| font-size: 14px; | font-size: 14px;/* Размер текста */ |
| line-height: 1; | line-height: 1;/*межстрочный интервал текста*/ |
| color: #373737; | color: #000000;/*цвет текста #000000-черный*/ |
| background: #f7f7f7; | background: #f5f5f5;/*цвет фона тела страницы #f5f5f5-дымчато-белый*/ |
| } | } |
| /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ | /* очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ |
| header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { | header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { |
| content: ""; | content: "";/*содержимое -пустая строка*/ |
| display: table; | display: table;/*представление -блочная таблица*/ |
| clear: both; | clear: both;/*отмена обтекания элемента*/ |
| } | } |
| /* стилевой класс, который управляет шириной контейнера сетки*/ | /* стилевой класс, который управляет шириной контейнера сетки*/ |
| .container { | .container { |
| margin: 0 auto; | margin: 0 auto;/*отступа от каждого края элемента отсутствует и расчитывается браузером*/ |
| width: 100%; | width: 100%;/*блок растянут на всю ширину веб-страницы*/ |
| max-width: 960px; | max-width: 960px;/*максимальную ширину блока*/ |
| padding: 0 15px; | padding: 0 15px;/*значение полей вокруг содержимого блока(вертикаль 0, горизонталь 15px*/ |
| } | } |
| </code> | </code> |
| |
| ====7. Стили для шапки и её содержимого==== | ====7. Стили содержимого блока header ==== |
| |
| <code css CSS> | <code css CSS> |
| header { | header { |
| width: 100%; | width: 100%;/*блок растянут на всю ширину веб-страницы*/ |
| background: #2f4f4f;/* цвет и размер блока меню */ | background: #2f4f4f;/* цвет блока меню #2F4F4F - аспидно-серый*/ |
| box-shadow: 3px 3px 1px rgba(0, 0, 0, .05); | box-shadow: 3px 3px 1px rgba(0, 0, 0, .05);/* Параметры тени */ |
| padding: 15px 0; | padding: 15px 0;/*значение полей вокруг содержимого блока(вертикаль 15px, горизонталь 0*/ |
| margin-bottom: 30px; | margin-bottom: 30px;/*отступ от нижнего края элемента*/ |
| position: relative; | position: relative;/*положение элемента устанавливается относительно его исходного места*/ |
| } | } |
| /* логотип */ | /* логотип */ |
| .logo { | .logo { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| } | |
| .logo span { | |
| color: #f7f7f7; | |
| display: inline-block; | |
| width: 30px; | |
| height: 30px; | |
| line-height: 30px; | |
| border-radius: 50%; | |
| margin: 5px 0; | |
| text-align: center; | |
| text-shadow: 2px 2px 1px rgba(0, 0, 0, .4); | |
| } | |
| .logo span:nth-child(odd) { | |
| background: #EF5A42; | |
| } | |
| .logo span:nth-child(even) { | |
| background: #f7f7f7; | |
| } | } |
| /* меню */ | /* меню */ |
| #menu { | #menu { |
| float: right; | float: right;/*элемент выравнивается по правой стороне*/ |
| } | } |
| #menu li { | #menu li { |
| display: inline-block; | display: inline-block;/*элемент обтекает другими элементами страницы*/ |
| margin-right: 30px; | margin-right: 30px;/*отступа от правого края элемента*/ |
| } | } |
| #menu a { | #menu a { |
| color: #f5f5f5;/*цвет меню*/ | color: #f5f5f5;/*цвет теста меню #f5f5f5 - дымчато-белый*/ |
| text-transform: uppercase; | text-transform: uppercase;/*символы текста становятся прописными (верхний регистр)*/ |
| letter-spacing: 1px; | letter-spacing: 1px;/*интервал между символами в пределах элемента*/ |
| font-weight: 600; | font-weight: 600;/* насыщенность цвета - 600 - жирное начертание */ |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| line-height: 40px; | line-height: 40px;/*межстрочный интервал текста*/ |
| } | } |
| #menu a:hover { | #menu a:hover { |
| color: #2f4f4f;/* цвет и размер верхней полосы разделителей блока "продолжить чтение" */ | color: #2f4f4f;/* цвет верхней полосы разделителей блока "продолжить чтение" */ |
| } | } |
| #menu li:last-child { | #menu li:last-child { |
| margin-right: 0; | margin-right: 0;/*отступа от правого края элемента*/ |
| } | } |
| /* форма поиска */ | /* форма поиска */ |
| #searchform { | #searchform { |
| float: right; | float: right;/*элемент выравнивается по правой стороне*/ |
| margin-left: 46px; | margin-left: 46px;/*отступ от левого края элемента*/ |
| display: inline-block; | display: inline-block;/*элемент обтекает другими элементами страницы*/ |
| position: relative; | position: relative;/*положение элемента устанавливается относительно его исходного места*/ |
| } | } |
| #searchform input { | #searchform input { |
| width: 170px; | width: 170px;/*ширина блока*/ |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| border: none; | border: none;/*бордюра(границы) нет*/ |
| padding-left: 10px; | padding-left: 10px;/*значение поля от левого края содержимого элемента*/ |
| height: 40px; | height: 40px;/*высота блочного элемента*/ |
| overflow: hidden; | overflow: hidden;/*отображается только область внутри элемента, остальное скрыто*/ |
| outline: none; | outline: none;/*цвет, стиль и толщина внешней границы отменены*/ |
| color: #9E9C9C; | color: #9E9C9C;/*цвет вводимого пользователем текста #9E9C9C - перламутровый светло-серый*/ |
| font-style: italic; | font-style: italic;/*шрифт вводимого пользователем текста - наклонный*/ |
| } | } |
| #searchform button { | #searchform button { |
| background: transparent; | background: transparent;/*устанавливает прозрачный фон*/ |
| height: 40px; | height: 40px;/*высота блочного элемента*/ |
| border: none; | border: none;/*бордюра(границы) нет*/ |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| right: 10px; | right: 10px;/*расстояние от правого края родительского элемента*/ |
| color: black; | color: black; /*цвет текста черный*/ |
| cursor: pointer; | cursor: pointer;/*устанавливает форму курсора, когда он находится в пределах элемента*/ |
| font-size: 18px; | font-size: 18px;/* размер шрифта элемента */ |
| } | } |
| #searchform input:focus { | #searchform input:focus { |
| outline: 2px solid #EBEBE3; | outline: 2px solid #EBEBE3;/*цвет, стиль и толщина внешней границы толщина 2px жирная цвет-#EBEBE3-Лесной волк*/ |
| } | } |
| /* кнопка переключения меню, появляющаяся при ширине 768px */ | /* кнопка переключения меню, появляющаяся при ширине 768px */ |
| .nav-toggle { | .nav-toggle { |
| display: none; | display: none;/*позиционирование отсутствует*/ |
| position: relative; | position: relative;/*положение элемента устанавливается относительно его исходного места*/ |
| float: right; | float: right;/*элемент выравнивается по правой стороне*/ |
| width: 40px; | width: 40px;/*ширина блока*/ |
| height: 40px; | height: 40px;/*высота блочного элемента*/ |
| margin-left: 20px; | margin-left: 20px;/*отступ от левого края элемента*/ |
| background: black; | background: black;/*цвет фона черный*/ |
| cursor: pointer; | cursor: pointer;/*устанавливает форму курсора, когда он находится в пределах элемента*/ |
| } | } |
| .nav-toggle span { | .nav-toggle span { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| top: 19px; | top: 19px;/*расстояние от верхнего края родительского элемента*/ |
| left: 8px; | left: 8px;/*расстояние от левого края родительского элемента*/ |
| right: 8px; | right: 8px;/*расстояние от правого края родительского элемента*/ |
| height: 2px; | height: 2px;/*высота блочного элемента*/ |
| background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */ | background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */ |
| } | } |
| .nav-toggle span:before, .nav-toggle span:after { | .nav-toggle span:before, .nav-toggle span:after { |
| content: ""; | content: ""; |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| left: 0; | left: 0;/*расстояние от левого края родительского элемента*/ |
| width: 100%; | width: 100%;/*ширина блока на всю страницу*/ |
| height: 2px; | height: 2px;/*высота блочного элемента*/ |
| background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */ | background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */ |
| } | } |
| .nav-toggle span:before { | .nav-toggle span:before { |
| top: -10px; | top: -10px;/*расстояние от верхнего края родительского элемента*/ |
| } | } |
| .nav-toggle span:after { | .nav-toggle span:after { |
| /* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/ | /* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/ |
| #menu.active { | #menu.active { |
| max-height: 123px; | max-height: 123px;/*высота блочного элемента*/ |
| } | } |
| </code> | </code> |
| |
| ====8. Стили для блока с основным содержимым==== | ====8. Стили содержимого блока main==== |
| |
| |
| /* левый контейнер */ | /* левый контейнер */ |
| .posts-list { | .posts-list { |
| margin-bottom: 30px; | margin-bottom: 30px;/*отступ от нижнего края элемента*/ |
| width: 64%; | width: 64%;/*ширина блока*/ |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| } | } |
| /* блок для статьи */ | /* блок для статьи */ |
| .post { | .post { |
| margin-bottom: 35px; | margin-bottom: 35px;/*отступ от нижнего края элемента*/ |
| } | } |
| .post-content p { | .post-content p { |
| line-height: 1.5; | line-height: 1.5;/*межстрочный интервал текста*/ |
| padding-bottom: 1em; | padding-bottom: 1em;/*значение поля от нижнего края содержимого элемента*/ |
| } | } |
| .post-image { | .post-image { |
| margin-bottom: 30px; | margin-bottom: 30px;/*отступ от нижнего края элемента*/ |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки поста */ | box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки поста */ |
| } | } |
| .category { | .category { |
| margin-bottom: 15px; | margin-bottom: 15px;/*отступ от нижнего края элемента*/ |
| } | } |
| .category a { | .category a { |
| color: #d3d3d3; | color: #d3d3d3; /*цвет текста категорий в поле анонса под картинкой #d3d3d3 - бороды абдель-керима*/ |
| text-transform: uppercase; | text-transform: uppercase;/*все символы текста становятся прописными (верхний регистр)*/ |
| } | } |
| .post-title { | .post-title { |
| margin-bottom: 12px; | margin-bottom: 12px;/*отступ от нижнего края элемента*/ |
| font-size: 26px; | font-size: 26px;/* размер шрифта элемента */ |
| } | } |
| /* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */ | /* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */ |
| border-top: 1.5px solid #2f4f4f;/* цвет и размер верхней полосы разделителей блока "продолжить чтение" */ | border-top: 1.5px solid #2f4f4f;/* цвет и размер верхней полосы разделителей блока "продолжить чтение" */ |
| border-bottom: 1.5px solid #2f4f4f;/* цвет и размер нижней полосы разделителей блока "продолжить чтение" */ | border-bottom: 1.5px solid #2f4f4f;/* цвет и размер нижней полосы разделителей блока "продолжить чтение" */ |
| position: relative; | position: relative;/*положение элемента устанавливается относительно его исходного места*/ |
| margin-top: 10px;/*отступ блока от текста-контента*/ | margin-top: 10px;/*отступ блока от текста-контента*/ |
| } | } |
| .more-link { | .more-link { |
| position: relative; | position: relative;/*положение элемента устанавливается относительно его исходного места*/ |
| display: inline-block; | display: inline-block;/*элемент обтекает другими элементами страницы*/ |
| font-size: 10px; | font-size: 10px;/* размер шрифта элемента */ |
| text-transform: uppercase; | text-transform: uppercase;/*все символы текста становятся прописными (верхний регистр)*/ |
| color: white; | color: white;/*цвет шрифта надписи "Продолжить чтение" white; белый*/ |
| line-height: 34px;/* блока блока "продолжить чтение" */ | line-height: 34px;/*межстрочный интервал между линиями блока "продолжить чтение" */ |
| padding: 0 20px; | padding: 0 20px;/* значение полей вокруг содержимого*/ |
| background: #2f4f4f;/* цвет фона блока "продолжить чтение" */ | background: #2f4f4f;/* цвет фона блока "продолжить чтение" */ |
| letter-spacing: 0.1em; | letter-spacing: 0.1em; |
| .more-link:after { | .more-link:after { |
| content: ''; | content: ''; |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| width: 0; | width: 0;/*ширина блока*/ |
| height: 0; | height: 0;/*высота блочного элемента*/ |
| top: 0; | top: 0;/*расстояние от верхнего края родительского элемента*/ |
| right: 0; | right: 0;/*расстояние от правого края родительского элемента*/ |
| border: solid transparent; | border: solid transparent;/*бордюр жирный прозрачный*/ |
| border-width: 17px 25px;/*высота и длина треугольника блока "продолжить чтение" */ | border-width: 17px 25px;/*высота и длина треугольника блока "продолжить чтение" */ |
| border-left-color: #2f4f4f;/* цвет фона треугольника блока "продолжить чтение" */ | border-left-color: #2f4f4f;/* цвет фона треугольника блока "продолжить чтение" */ |
| transform: translateX(100%); | transform: translateX(100%);/*сдвиг элемента по горизонтали влево на указанное значение*/ |
| } | } |
| .post-social { | .post-social { |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| left: auto; | left: auto;/*расстояние от левого края родительского элемента расчитывается браузером*/ |
| top: 50%; | top: 50%;/*расстояние от верхнего края родительского элемента*/ |
| right: 0; | right: 0;/*расстояние от правого края родительского элемента*/ |
| text-align: right; | text-align: right;/*горизонтальное выравнивание текста в пределах элемента*/ |
| transform: translateY(-50%); | transform: translateY(-50%);/*сдвиг элемента по горизонтали вправо на указанное значение*/ |
| padding: 0; | padding: 0;/* значение полей вокруг содержимого*/ |
| font-size: 12px; | font-size: 12px;/* размер шрифта элемента */ |
| } | } |
| .post-social a { | .post-social a { |
| display: inline-block; | display: inline-block;/*элемент обтекает другими элементами страницы*/ |
| margin-left: 8px; | margin-left: 8px;/*отступ от левого края элемента*/ |
| color: #2f4f4f;/* цвет фона иконок соц сетей в блока "продолжить чтение" */ | color: #2f4f4f;/* цвет фона иконок соц сетей в блока "продолжить чтение" */ |
| width: 25px; | width: 25px;/*ширина блока*/ |
| height: 25px; | height: 25px;/*высота блочного элемента*/ |
| line-height: 23px; | line-height: 23px;/*межстрочный интервал*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| border-radius: 50%; | border-radius: 50%;/*радиус скругления уголков рамки*/ |
| border: 1px solid; | border: 1px solid; /*размер бордюра 1px жирный*/ |
| } | } |
| </code> | </code> |
| |
| ====9. Стили для боковой колонки==== | ====9. Стили блока aside==== |
| |
| <code css CSS> | <code css CSS> |
| /* правый контейнер */ | /* правый контейнер */ |
| aside { | aside { |
| width: 33%; | width: 33%;/*ширина блока*/ |
| float: right; | float: right;/*элемент выравнивается по правой стороне*/ |
| } | } |
| /* блок для виджетов */ | /* блок для виджетов */ |
| .widget { | .widget { |
| padding: 20px 15px; | padding: 20px 15px;/* значение полей вокруг содержимого*/ |
| background: #dcdcdc;/* цвет блока для виджетов */ | background: #dcdcdc;/* цвет блока для виджетов */ |
| font-size: 13px; | font-size: 13px;/* размер шрифта элемента */ |
| margin-bottom: 30px; | margin-bottom: 30px;/*отступ от нижнего края элемента*/ |
| box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */ | box-shadow: 4px 4px 2px rgba(0, 0, 0, .05);/* тень рамки блоков */ |
| } | } |
| padding: 10px;/* значение полей вокруг содержимого*/ | padding: 10px;/* значение полей вокруг содержимого*/ |
| margin-bottom: 10px;/* отступ от рамки блоков */ | margin-bottom: 10px;/* отступ от рамки блоков */ |
| text-align: center;/* положение текста блоков */ | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| border: 2px solid #2f4f4f;/* цвет рамки категорий */ | border: 2px solid #2f4f4f;/* цвет рамки категорий */ |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */ | box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени блока категорий */ |
| } | } |
| .widget-category-list li:last-child { | .widget-category-list li:last-child { |
| border-bottom: none; | border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/ |
| } | } |
| .widget-category-list li a { | .widget-category-list li a { |
| .widget-category-list li a:before { | .widget-category-list li a:before { |
| content: "\f105"; /* стрелки перед текстом наименований категорий постов*/ | content: "\f105"; /* стрелки перед текстом наименований категорий постов*/ |
| display: inline-block; | display: inline-block;/*элемент обтекает другими элементами страницы*/ |
| font-family: 'FontAwesome'; | font-family: 'FontAwesome';/*шрифты колекции иконок FontAwesome*/ |
| margin-right: 10px; | margin-right: 10px;/*отступа от правого края элемента*/ |
| color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/ | color: #2f4f4f;/* цвет стрелки перед текстом наименований категорий постов*/ |
| } | } |
| } | } |
| .widget-posts-list li:nth-child(1) { | .widget-posts-list li:nth-child(1) { |
| border-top: none; | border-top: none;/* цвет и размер полос разделителей блока постов отсутствует*/ |
| } | } |
| .post-image-small { | .post-image-small { |
| width: 60%; /*размер картинки*/ | width: 60%; /*размер - ширина картинки*/ |
| float: left;/*положение картинки*/ | float: left;/*положение картинки -элемент выравнивается по левой стороне*/ |
| margin-right: 15px;/*отступ от правого края картинки*/ | margin-right: 15px;/*отступ от правого края картинки*/ |
| box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */ | box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки */ |
| } | } |
| .widget-post-title { | .widget-post-title { |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| } | } |
| </code> | </code> |
| |
| ====10. Стили для нижнего колонтитула==== | ====10. Стили блока footer==== |
| Подвал сайта разделим на три равных столбца: | Подвал сайта разделим на три равных столбца: |
| |
| <code css CSS> | <code css CSS> |
| footer { | footer { |
| padding: 20px 0; | padding: 20px 0;/* значение полей вокруг содержимого*/ |
| background: #3C3D41; | background: #3C3D41;/*цвет фона подвала #3C3D41 - сланцево-серый*/ |
| color: white; | color: white;/*цвет шрифта подвала #write - белый*/ |
| } | } |
| .footer-col { | .footer-col { |
| width: 100%; | width: 100%;/*ширина блока растянута на всю страницу*/ |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| } | |
| .footer-col a { | |
| color: white; | |
| } | } |
| </code> | </code> |
| |
| <code css CSS> | <code css CSS> |
| @media (max-width: 768px) { | @media (max-width: 768px) {/* правило запроса для ширины viewport от 768px*/ |
| /* показываем кнопку для переключения верхней навигации */ | /* показываем кнопку для переключения верхней навигации */ |
| .nav-toggle { | .nav-toggle { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| } | } |
| header { | header { |
| padding: 10px 0; | padding: 10px 0;/* значение полей вокруг содержимого*/ |
| } | } |
| /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ | /* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */ |
| #menu { | #menu { |
| max-height: 0; | max-height: 0;/*высота блочного элемента*/ |
| background: white; | background: #2f4f4f;/*цвет фона кнопок мобильного меню #2f4f4f - аспидно-серый*/ |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| position: absolute; | position: absolute;/*указывает, что элемент абсолютно позиционирован*/ |
| overflow: hidden; | overflow: hidden;/*отображается только область внутри элемента, остальное скрыто*/ |
| top: 63px; | top: 63px;/*расстояние от верхнего края родительского элемента*/ |
| right: 0; | right: 0;/*расстояние от правого края родительского элемента*/ |
| left: 0; | left: 0;/*расстояние от левого края родительского элемента*/ |
| margin: 0; | margin: 0;/*значение отступа от каждого края элемента*/ |
| padding: 0; | padding: 0;/* значение полей вокруг содержимого*/ |
| z-index: 3; | z-index: 3;/*налажение элементов друг на друга в определенном порядке*/ |
| } | } |
| /* делаем элементы списка блочными, чтобы они располагались друг под другом */ | /* делаем элементы списка блочными, чтобы они располагались друг под другом */ |
| #menu li { | #menu li { |
| display: block; | display: block;/*элемент показывается как блочный*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| border-bottom: 1px solid black; | border-bottom: 1px solid black;/*толщина 1px стиль жирный и цвет границы черный внизу элемента*/ |
| margin-right: 0; | margin-right: 0;/*отступа от правого края элемента*/ |
| } | } |
| /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ | /* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/ |
| .posts-list, aside { | .posts-list, aside { |
| width: 100%; | width: 100%;/*ширина блока растянута на всю страницу*/ |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| } | } |
| .widget-post-title { | .widget-post-title { |
| font-size: 1.5em; | font-size: 1.5em;/* размер шрифта элемента */ |
| } | } |
| } | } |
| |
| @media (max-width: 480px) { | @media (max-width: 480px) {/* правило запроса для ширины viewport от 480px*/ |
| /* отменяем обтекание для логотипа и выравниваем по центру*/ | /* отменяем обтекание для логотипа и выравниваем по центру*/ |
| .logo { | .logo { |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| margin: 0 auto 15px; | margin: 0 auto 15px;/*значение отступа от каждого края элемента*/ |
| display: table; | display: table;/*представление -блочная таблица*/ |
| } | } |
| .logo span { | .logo span { |
| margin: 0 2px; | margin: 0 2px;/*значение отступа от каждого края элемента*/ |
| } | } |
| /* позиционируем меню на увеличившуюся высоту шапки */ | /* позиционируем меню на увеличившуюся высоту шапки */ |
| #menu { | #menu { |
| top: 118px; | top: 118px;/*расстояние от верхнего края родительского элемента*/ |
| } | } |
| /* позиционируем форму поиска по левому краю */ | /* позиционируем форму поиска по левому краю */ |
| #searchform { | #searchform { |
| float: left; | float: left;/*элемент выравнивается по левой стороне*/ |
| margin-left: 0; | margin-left: 0;/*отступ от левого края элемента*/ |
| } | } |
| /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ | /* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */ |
| .post-footer { | .post-footer { |
| border-top: none; | border-top: none;/* толщина, стиль и цвет границы сверху элемента отсутствует*/ |
| border-bottom: none; | border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| } | } |
| /* отменяем позиционирование кнопок соцсетей */ | /* отменяем позиционирование кнопок соцсетей */ |
| .post-social { | .post-social { |
| position: static; | position: static;/*элемент отображаются как обычно*/ |
| text-align: center; | text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/ |
| transform: none; | transform: none;/*трансформации элемента нет*/ |
| margin-top: 20px; | margin-top: 20px;/*отступ блока от текста-контента*/ |
| } | } |
| .widget-post-title { | .widget-post-title { |
| font-size: 1.2em; | font-size: 1.2em;/* размер шрифта элемента */ |
| } | } |
| /* отменяем обтекание для столбцов подвала страницы */ | /* отменяем обтекание для столбцов подвала страницы */ |
| .footer-col { | .footer-col { |
| float: none; | float: none;/*выравнивание элемента отсутствует*/ |
| margin-bottom: 20px; | margin-bottom: 20px;/*отступ от нижнего края элемента*/ |
| width: 100%; | width: 100%;/*ширина блока растянута на всю страницу*/ |
| text-align: left; | text-align: left;/*горизонтальное выравнивание текста в пределах элемента*/ |
| } | } |
| } | } |
| $('#menu').toggleClass('active'); | $('#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> | });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> |
| |
| :# | :# |
| | ====14. Архив файлов примера==== |
| | Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ |
| | <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ |
| | {{ :software:development:demo:code.rar |rar arhiv 71,8mb}} |
| |
