Макет сайта
Веб-сайт часто делится на шапку, меню, контент и нижний колонтитул:
На выбор предлагается множество различных макетов. Однако приведенная выше структура является одной из наиболее распространенных, и мы подробнее рассмотрим ее в этом руководстве.
Заголовок
Заголовок обычно расположен в верхней части веб-сайта (или прямо под верхним меню навигации). Он часто содержит логотип или название веб-сайта:
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Результат
Заголовок
Панель Навигации
Панель навигации содержит список ссылок, которые помогают посетителям перемещаться по вашему веб-сайту:
/* Контейнер панели навигации */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Ссылки на панель навигации */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Ссылки - меняют цвет при наведении курсора мыши */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Result
Содержание
Макет в этом разделе часто зависит от целевых пользователей. Наиболее распространенным макетом является один (или их сочетание) из следующих:
- 1-column (часто используется для мобильных браузеров)
- 2-column (часто используется для планшетов и ноутбуков)
- 3-column макет (используется только для настольных компьютеров)
1-column:
2-column:
3-column:
Мы создадим макет из 3 столбцов и изменим его на макет из 1 столбца на экранах меньшего размера:
/* Создайте три равных столбца, которые плавают рядом друг с другом */
.column {
float: left;
width: 33.33%;
}
/* Очистить плавающие значения после столбцов */
.row:after {
content: "";
display: table;
clear: both;
}
/* Адаптивный макет - позволяет размещать три столбца друг над другом, а не рядом друг с другом на экранах меньшего размера (шириной 600 пикселей или меньше) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Результат
Колонна
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Колонна
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Колонна
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Совет: Чтобы создать макет из 2 столбцов, измените ширину на 50%. Чтобы создать макет из 4 столбцов, используйте 25% и т.д.
Совет: Вам интересно, как работает правило @media? Подробнее об этом читайте в нашей главе CSS Media Queries.
Совет: Более современным способом создания макетов столбцов является использование CSS Flexbox. Однако он не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте значения с плавающей запятой (как показано выше).
Чтобы узнать больше о модуле Flexible Box Layout, прочитайте нашу главу о CSS Flexbox..
Неравные столбцы
Основной контент - это самая большая и важная часть вашего сайта.
Обычно используется с неодинаковой шириной столбцов, так что большая часть места зарезервирована для основного содержимого. Дополнительное содержимое (если оно есть) часто используется в качестве альтернативной навигации или для указания информации, относящейся к основному содержимому. Меняйте ширину по своему усмотрению, только помните, что в сумме она должна составлять 100%.:
.column {
float: left;
}
/* Левый и правый столбцы */
.column.side {
width: 25%;
}
/* Средний столбец */
.column.middle
{
width: 50%;
}
/* Адаптивный макет - три столбца располагаются друг над другом, а не рядом друг с другом */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Результат
Сторона
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Основное Содержание
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Сторона
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Нижний колонтитул
Нижний колонтитул размещается внизу вашей страницы. Часто он содержит такую информацию, как авторские права и контактные данные:
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Результат
Адаптивный Макет веб-сайта
Используя часть приведенного выше CSS-кода, мы создали адаптивный макет веб-сайта, который варьируется от двух столбцов до столбцов полной ширины в зависимости от ширины экрана: