/* Устройства с очень маленьким экраном (смартфоны, меньше 768px) */
/* Стили CSS (по умолчанию) - для ширины viewport <768px */
/* Устроства с маленьким экраном (планшеты, 768px и выше) */
@media (max-width: 780px) {/* правило запроса для ширины viewport от 480px*/
.text{
display: none;
}
.content {
width:auto;
left:0px;
top: 0px;
}
}
=====Пример сайта=====
Пример сайта выполненного в [[https://book51.ru/demo/code/book/index.html|адаптивной вёрстке]] можно посмотреть в разделе пример или перейдя по [[https://book51.ru/demo/code/book/index.html|ссылке]]. для понимания примера необходимо сузить просматриваемую страницу в браузере или просмотреть на компьютере и в браузере мобильного устройства.
====1. Блок ====
Добавим в блок %%%% (голова) запись кода приведенного ниже и открыв **"Пояснительную записку блока :"** разберем данный код:
book
#: Пояснительная записка блока :
- **%%%%**
Blender 3.6 LTS
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.
Spring
Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life..
#:Пояснительная записка блока main:
- **%%%%** - начало блока хранения содержания веб-страницы (контента).
- **%%%%** - начало контейнера контента веб страницы.
- **%%%%** - начало контейнера с анонсом статей.
- **%%%%** - начало контейнера с анонсом 1й статьи.
- **%%
%%** - блок вставки картинки с указанием месторасположения файла.
- **%%%%** - начало блока текстовой информации 1й статьи.
- **%%%%** - блок указания категории 1й статьи.
- **%%Blender 3.6 LTS
%%** - блок заголовка 1й статьи.
- **%%%%**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. - **%%
%%** - блок текста 1й статьи.
- **%%%%** - конец блока "Читать далее" 1й статьи.
- **%%%%** - конец блока текстовой информации 1й статьи.
- **%% %%** - конец контейнера с анонсом 1й статьи.
- **%%%%** - начало контейнера с анонсом 2й статьи.
- **%%%%** - конец блока вставки видеофайла с указанием месторасположения.
- **%%%%** - начало блока текстовой информации 2й статьи.
- **%%%%** - блок указания категории 2й статьи.
- **%%Spring
%%** - блок заголовка 2й статьи.
- **%%%%**Is the story of a shepherdess and her dog who encounter ancient spirits in order to continue the cycle of life.**%%
%%** - блок текста 2й статьи.
- **%%%%** - конец блока "Читать далее" 2й статьи.
- **%%%%** - конец блока текстовой информации 2й статьи.
- **%% %%** - конец контейнера с анонсом 2й статьи.
- **%%%%** - конец контейнера с анонсом статей.
:#
====4. Блок
#:«Пояснительная записка блока %%** - конец контейнера всего контента веб страницы.
:#
====6. Общие CSS-стили====
Все нижеприведенные стили вынесены в один внешний файл CSS.
/*сброс стилей браузера по умолчанию. */
*, *:after, *:before {
box-sizing: border-box;/*ширины и высоты элемента(width и height = значения полей и границ, но не отступов (margin))*/
padding: 0;/*значение полей вокруг содержимого элемента*/
margin: 0;/*значение отступа от каждого края элемента*/
transition: .5s ease-in-out;/*эффект анимации начинается и заканчивается медленно*/
/*плавность переходов для всех элементов страницы*/
}
ul {
list-style: none;/*стиль маркера отменен*/
}
a {
text-decoration: none;/*оформление текста отменено*/
outline: none;/*цвет, стиль и толщина внешней границы отменены*/
}
img {
display: block;/*элемент показывается как блочный*/
width: 100%;/*рисунок растянут на всю ширину веб-страницы*/
}
h1, h2, h3, h4, h5, h6 {
font-family: Geneva, Arial, Helvetica, sans-serif;/*шрифты для заголовка*/
font-weight: normal;/*обычная насыщенность шрифтов */
letter-spacing: 1px;/*интервал между символами*/
}
body {
font-family: Geneva, Arial, Helvetica, sans-serif;/*шрифты для заголовка*/
font-size: 14px;/* Размер текста */
line-height: 1;/*межстрочный интервал текста*/
color: #000000;/*цвет текста #000000-черный*/
background: #f5f5f5;/*цвет фона тела страницы #f5f5f5-дымчато-белый*/
}
/* очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
content: "";/*содержимое -пустая строка*/
display: table;/*представление -блочная таблица*/
clear: both;/*отмена обтекания элемента*/
}
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
margin: 0 auto;/*отступа от каждого края элемента отсутствует и расчитывается браузером*/
width: 100%;/*блок растянут на всю ширину веб-страницы*/
max-width: 960px;/*максимальную ширину блока*/
padding: 0 15px;/*значение полей вокруг содержимого блока(вертикаль 0, горизонталь 15px*/
}
====7. Стили содержимого блока header ====
header {
width: 100%;/*блок растянут на всю ширину веб-страницы*/
background: #2f4f4f;/* цвет блока меню #2F4F4F - аспидно-серый*/
box-shadow: 3px 3px 1px rgba(0, 0, 0, .05);/* Параметры тени */
padding: 15px 0;/*значение полей вокруг содержимого блока(вертикаль 15px, горизонталь 0*/
margin-bottom: 30px;/*отступ от нижнего края элемента*/
position: relative;/*положение элемента устанавливается относительно его исходного места*/
}
/* логотип */
.logo {
display: block;/*элемент показывается как блочный*/
float: left;/*элемент выравнивается по левой стороне*/
}
/* меню */
#menu {
float: right;/*элемент выравнивается по правой стороне*/
}
#menu li {
display: inline-block;/*элемент обтекает другими элементами страницы*/
margin-right: 30px;/*отступа от правого края элемента*/
}
#menu a {
color: #f5f5f5;/*цвет теста меню #f5f5f5 - дымчато-белый*/
text-transform: uppercase;/*символы текста становятся прописными (верхний регистр)*/
letter-spacing: 1px;/*интервал между символами в пределах элемента*/
font-weight: 600;/* насыщенность цвета - 600 - жирное начертание */
display: block;/*элемент показывается как блочный*/
line-height: 40px;/*межстрочный интервал текста*/
}
#menu a:hover {
color: #2f4f4f;/* цвет верхней полосы разделителей блока "продолжить чтение" */
}
#menu li:last-child {
margin-right: 0;/*отступа от правого края элемента*/
}
/* форма поиска */
#searchform {
float: right;/*элемент выравнивается по правой стороне*/
margin-left: 46px;/*отступ от левого края элемента*/
display: inline-block;/*элемент обтекает другими элементами страницы*/
position: relative;/*положение элемента устанавливается относительно его исходного места*/
}
#searchform input {
width: 170px;/*ширина блока*/
float: left;/*элемент выравнивается по левой стороне*/
border: none;/*бордюра(границы) нет*/
padding-left: 10px;/*значение поля от левого края содержимого элемента*/
height: 40px;/*высота блочного элемента*/
overflow: hidden;/*отображается только область внутри элемента, остальное скрыто*/
outline: none;/*цвет, стиль и толщина внешней границы отменены*/
color: #9E9C9C;/*цвет вводимого пользователем текста #9E9C9C - перламутровый светло-серый*/
font-style: italic;/*шрифт вводимого пользователем текста - наклонный*/
}
#searchform button {
background: transparent;/*устанавливает прозрачный фон*/
height: 40px;/*высота блочного элемента*/
border: none;/*бордюра(границы) нет*/
position: absolute;/*указывает, что элемент абсолютно позиционирован*/
right: 10px;/*расстояние от правого края родительского элемента*/
color: black; /*цвет текста черный*/
cursor: pointer;/*устанавливает форму курсора, когда он находится в пределах элемента*/
font-size: 18px;/* размер шрифта элемента */
}
#searchform input:focus {
outline: 2px solid #EBEBE3;/*цвет, стиль и толщина внешней границы толщина 2px жирная цвет-#EBEBE3-Лесной волк*/
}
/* кнопка переключения меню, появляющаяся при ширине 768px */
.nav-toggle {
display: none;/*позиционирование отсутствует*/
position: relative;/*положение элемента устанавливается относительно его исходного места*/
float: right;/*элемент выравнивается по правой стороне*/
width: 40px;/*ширина блока*/
height: 40px;/*высота блочного элемента*/
margin-left: 20px;/*отступ от левого края элемента*/
background: black;/*цвет фона черный*/
cursor: pointer;/*устанавливает форму курсора, когда он находится в пределах элемента*/
}
.nav-toggle span {
display: block;/*элемент показывается как блочный*/
position: absolute;/*указывает, что элемент абсолютно позиционирован*/
top: 19px;/*расстояние от верхнего края родительского элемента*/
left: 8px;/*расстояние от левого края родительского элемента*/
right: 8px;/*расстояние от правого края родительского элемента*/
height: 2px;/*высота блочного элемента*/
background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */
}
.nav-toggle span:before, .nav-toggle span:after {
content: "";
position: absolute;/*указывает, что элемент абсолютно позиционирован*/
display: block;/*элемент показывается как блочный*/
left: 0;/*расстояние от левого края родительского элемента*/
width: 100%;/*ширина блока на всю страницу*/
height: 2px;/*высота блочного элемента*/
background: white;/* цвет и размер верхней полосы разделителей кнопки меню для мобильных */
}
.nav-toggle span:before {
top: -10px;/*расстояние от верхнего края родительского элемента*/
}
.nav-toggle span:after {
bottom: -10px;
}
/* класс, который будет добавлен в верхнему меню при нажатии на кнопку и покажет скрытое меню*/
#menu.active {
max-height: 123px;/*высота блочного элемента*/
}
====8. Стили содержимого блока main====
/* левый контейнер */
.posts-list {
margin-bottom: 30px;/*отступ от нижнего края элемента*/
width: 64%;/*ширина блока*/
float: left;/*элемент выравнивается по левой стороне*/
}
/* блок для статьи */
.post {
margin-bottom: 35px;/*отступ от нижнего края элемента*/
}
.post-content p {
line-height: 1.5;/*межстрочный интервал текста*/
padding-bottom: 1em;/*значение поля от нижнего края содержимого элемента*/
}
.post-image {
margin-bottom: 30px;/*отступ от нижнего края элемента*/
box-shadow: 3px 3px 0 0 #c0c0c0;/* цвет тени картинки поста */
}
.category {
margin-bottom: 15px;/*отступ от нижнего края элемента*/
}
.category a {
color: #d3d3d3; /*цвет текста категорий в поле анонса под картинкой #d3d3d3 - бороды абдель-керима*/
text-transform: uppercase;/*все символы текста становятся прописными (верхний регистр)*/
}
.post-title {
margin-bottom: 12px;/*отступ от нижнего края элемента*/
font-size: 26px;/* размер шрифта элемента */
}
/* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */
.post-footer {
border-top: 1.5px solid #2f4f4f;/* цвет и размер верхней полосы разделителей блока "продолжить чтение" */
border-bottom: 1.5px solid #2f4f4f;/* цвет и размер нижней полосы разделителей блока "продолжить чтение" */
position: relative;/*положение элемента устанавливается относительно его исходного места*/
margin-top: 10px;/*отступ блока от текста-контента*/
}
.more-link {
position: relative;/*положение элемента устанавливается относительно его исходного места*/
display: inline-block;/*элемент обтекает другими элементами страницы*/
font-size: 10px;/* размер шрифта элемента */
text-transform: uppercase;/*все символы текста становятся прописными (верхний регистр)*/
color: white;/*цвет шрифта надписи "Продолжить чтение" white; белый*/
line-height: 34px;/*межстрочный интервал между линиями блока "продолжить чтение" */
padding: 0 20px;/* значение полей вокруг содержимого*/
background: #2f4f4f;/* цвет фона блока "продолжить чтение" */
letter-spacing: 0.1em;
white-space: nowrap;
}
.more-link:after {
content: '';
display: block;/*элемент показывается как блочный*/
position: absolute;/*указывает, что элемент абсолютно позиционирован*/
width: 0;/*ширина блока*/
height: 0;/*высота блочного элемента*/
top: 0;/*расстояние от верхнего края родительского элемента*/
right: 0;/*расстояние от правого края родительского элемента*/
border: solid transparent;/*бордюр жирный прозрачный*/
border-width: 17px 25px;/*высота и длина треугольника блока "продолжить чтение" */
border-left-color: #2f4f4f;/* цвет фона треугольника блока "продолжить чтение" */
transform: translateX(100%);/*сдвиг элемента по горизонтали влево на указанное значение*/
}
.post-social {
position: absolute;/*указывает, что элемент абсолютно позиционирован*/
left: auto;/*расстояние от левого края родительского элемента расчитывается браузером*/
top: 50%;/*расстояние от верхнего края родительского элемента*/
right: 0;/*расстояние от правого края родительского элемента*/
text-align: right;/*горизонтальное выравнивание текста в пределах элемента*/
transform: translateY(-50%);/*сдвиг элемента по горизонтали вправо на указанное значение*/
padding: 0;/* значение полей вокруг содержимого*/
font-size: 12px;/* размер шрифта элемента */
}
.post-social a {
display: inline-block;/*элемент обтекает другими элементами страницы*/
margin-left: 8px;/*отступ от левого края элемента*/
color: #2f4f4f;/* цвет фона иконок соц сетей в блока "продолжить чтение" */
width: 25px;/*ширина блока*/
height: 25px;/*высота блочного элемента*/
line-height: 23px;/*межстрочный интервал*/
text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
border-radius: 50%;/*радиус скругления уголков рамки*/
border: 1px solid; /*размер бордюра 1px жирный*/
}
====10. Стили блока footer====
Подвал сайта разделим на три равных столбца:
footer {
padding: 20px 0;/* значение полей вокруг содержимого*/
background: #3C3D41;/*цвет фона подвала #3C3D41 - сланцево-серый*/
color: white;/*цвет шрифта подвала #write - белый*/
}
.footer-col {
width: 100%;/*ширина блока растянута на всю страницу*/
float: left;/*элемент выравнивается по левой стороне*/
}
====11. Медиа-запросы====
@media (max-width: 768px) {/* правило запроса для ширины viewport от 768px*/
/* показываем кнопку для переключения верхней навигации */
.nav-toggle {
display: block;/*элемент показывается как блочный*/
}
header {
padding: 10px 0;/* значение полей вокруг содержимого*/
}
/* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */
#menu {
max-height: 0;/*высота блочного элемента*/
background: #2f4f4f;/*цвет фона кнопок мобильного меню #2f4f4f - аспидно-серый*/
float: none;/*выравнивание элемента отсутствует*/
position: absolute;/*указывает, что элемент абсолютно позиционирован*/
overflow: hidden;/*отображается только область внутри элемента, остальное скрыто*/
top: 63px;/*расстояние от верхнего края родительского элемента*/
right: 0;/*расстояние от правого края родительского элемента*/
left: 0;/*расстояние от левого края родительского элемента*/
margin: 0;/*значение отступа от каждого края элемента*/
padding: 0;/* значение полей вокруг содержимого*/
z-index: 3;/*налажение элементов друг на друга в определенном порядке*/
}
/* делаем элементы списка блочными, чтобы они располагались друг под другом */
#menu li {
display: block;/*элемент показывается как блочный*/
text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
border-bottom: 1px solid black;/*толщина 1px стиль жирный и цвет границы черный внизу элемента*/
margin-right: 0;/*отступа от правого края элемента*/
}
/* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
.posts-list, aside {
width: 100%;/*ширина блока растянута на всю страницу*/
float: none;/*выравнивание элемента отсутствует*/
}
.widget-post-title {
font-size: 1.5em;/* размер шрифта элемента */
}
}
@media (max-width: 480px) {/* правило запроса для ширины viewport от 480px*/
/* отменяем обтекание для логотипа и выравниваем по центру*/
.logo {
float: none;/*выравнивание элемента отсутствует*/
margin: 0 auto 15px;/*значение отступа от каждого края элемента*/
display: table;/*представление -блочная таблица*/
}
.logo span {
margin: 0 2px;/*значение отступа от каждого края элемента*/
}
/* позиционируем меню на увеличившуюся высоту шапки */
#menu {
top: 118px;/*расстояние от верхнего края родительского элемента*/
}
/* позиционируем форму поиска по левому краю */
#searchform {
float: left;/*элемент выравнивается по левой стороне*/
margin-left: 0;/*отступ от левого края элемента*/
}
/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
.post-footer {
border-top: none;/* толщина, стиль и цвет границы сверху элемента отсутствует*/
border-bottom: none;/*толщина, стиль и цвет границы внизу элемента отсутствует*/
text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
}
/* отменяем позиционирование кнопок соцсетей */
.post-social {
position: static;/*элемент отображаются как обычно*/
text-align: center;/*горизонтальное выравнивание текста в пределах элемента*/
transform: none;/*трансформации элемента нет*/
margin-top: 20px;/*отступ блока от текста-контента*/
}
.widget-post-title {
font-size: 1.2em;/* размер шрифта элемента */
}
/* отменяем обтекание для столбцов подвала страницы */
.footer-col {
float: none;/*выравнивание элемента отсутствует*/
margin-bottom: 20px;/*отступ от нижнего края элемента*/
width: 100%;/*ширина блока растянута на всю страницу*/
text-align: left;/*горизонтальное выравнивание текста в пределах элемента*/
}
}
====12. Скрипт мобильного меню в отдельном файле====
#: Пояснительная записка
- **%%%%** - конец подключение файла скрипта.
:#
====14. Архив файлов примера====
Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\
Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере. \\
{{:software:development:demo:book.rar|rar arhiv book 409kb}}