Адаптивный макет страницы
Здесь мы начали изучать стили, здесь они пригодятся более серьёзно.
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Моя первая страница</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<header>Заголовок страницы (шапка сайта)</header>
<article>
Контент - основное содержимое страницы.
</article>
<aside>Боковая колонка (SideBar)</aside>
<footer>Подвал страницы</footer>
</div>
</body>
</html>
Описание тегов, которые не выделены жирным текстом, можно посмотреть здесь.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
сообщает браузеру что выводить макет страницы нужно в зависимости от типа устройства (компьютер, телефон).
<div id="container">
контейнер макета. Внутри будут располагаться блоки в зависимости от типа устройства.
<header>, <article>, <aside>, <footer>
- тут понятно назначение по их описанию в коде.
style.css
/* для блока - шапка */
header{
text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 950px; /* Ширина блока и общая ширина*/
background: #900000; /* Цвет фона */
color:#fff;
height: 50px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для контейнера */
#container {
width: 970px;/* Ширина слоя или ширина макета+20px */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
/* для блока - меню */
aside {
width: 300px; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
color: white; /* Цвет текста */
background: #008080; /* Цвет фона */
padding: 10px; /* Внутренние поля вокруг содержимого */
}
/* для блока - контент */
article { /* Правая колонка*/
width: 630px;/* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #e0e0e0; /* Цвет заднего фона */
}
/* для блока - подвал */
footer{
width:950px; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background:#444;
color:#fff;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
@media screen and (max-width: 768px) {
aside, article, footer, header, #container {
margin-left:0px;
margin-top:0px;
width:98%;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
}
Файл стилей с комментариями, если что то не ясно отвечу в комментариях
@media screen and (max-width: 768px) {
В случае, если ширина экрана будет меньше 768 пикселей (просмотр с телефона), то сайдбар убираем под контент. На моём телефоне, в альбомной (горизонтальной) ориентации – макет выглядит как на картинке. В портретной (вертикальной) ориентации – сайдбар убирается вниз.