4. Боковая колонка
В боковую колонку <aside> добавим список категорий, последние записи и форму подписки на рассылку:
5. Нижний колонтитул
В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:
6. Общие CSS-стили
Общие стили, сброс стилей браузера по умолчанию:
8.
9.
10.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
@media (max-width: 768px) {
/* показываем кнопку для переключения верхней навигации */
.nav-toggle {
display: block;
}
header {
padding: 10px 0;
}
/* скрываем верхнее меню, отменяем обтекание, позиционируем его, сместив на высоту шапки сайта */
#menu {
max-height: 0;
background: white;
float: none;
position: absolute;
overflow: hidden;
top: 63px;
right: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 3;
}
/* делаем элементы списка блочными, чтобы они располагались друг под другом */
#menu li {
display: block;
padding-left: 15px;
border-bottom: 1px solid #EBEBE3;
margin-right: 0;
}
/* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
.posts-list, aside {
width: 100%;
float: none;
}
.widget-post-title {
font-size: 1.5em;
}
}
@media (max-width: 480px) {
/* выравниванием логотип по центру */
nav {
text-align: center;
}
/* отменяем обтекание для логотипа */
.logo {
float: none;
margin-bottom: 15px;
}
/* позиционируем меню на увеличившуюся высоту шапки */
#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: center;
}
.footer-col:last-child {
text-align: center;
margin-bottom: 0;
}
}
|
За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню — от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом </body>:
1
2
3
4
5
|
<script>
$('.nav-toggle').on('click', function(){
$('#menu').toggleClass('active');
});
</script>
|
Вёрстка главной страницы Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px. В первой точке скроем верхнее меню и переместим сайдбар под контейнер с постами. Во второй точке изменим расположение элементов шапки, отменим позиционирование кнопок социальных сетей в постах и отменим обтекание столбцов подвала страницы. main-page РИС. 2. ПРИМЕР АДАПТИВНОЙ ВЕРСТКИ Перейти на страницу 1. Метатеги и раздел
1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы): 1 2 3 4 5 6 7 8 9 10 11 12 13