CSS Макет веб сайта
Макет сайта
Веб сайт делится на заголовки, меню, содержимое и нижний колонтитул:
Есть масса различных макетов на выбор. Тем не менее, структура в примере выше, является одним из наиболее распространенных, и мы более подробно рассмотрим его в этом уроке.
Заголовок
Заголовок обычно находится в верхней части веб сайта (или прямо под верхним меню навигации). Часто содержит логотип или название сайта:
Пример
.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;
}
Результат
Содержимое
Макет в этом разделе, часто зависит от целевых пользователей. Наиболее распространенный макет (или их объединение) состоит из следующего:
- 1-столбец (часто используется для мобильных браузеров)
- 2-столбец (часто используется для планшетов и ноутбуков)
- 3-столбец макета (используется только для настольных компьютеров)
1-колонка:
2-колонки:
3-колонки:
Мы создадим макет с 3 столбцами и изменим его на макет с 1 столбцом l для маленьких экранов:
Пример
/* Создайте три одинаковых столбца, которые плавают друг к другу */
.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.
Совет: Чтобы создать макет с двумя столбцами, нужно изменить ширину на 50 процентов. Чтобы создать макет с 4 столбцами, используйте 25 процентов и т.д.
Совет: Вам интересно, как работает правило @media? Подробнее о это в нашей главе CSS Медиа Запросы.
Совет: Более продвинутый способ создания макетов использование столбцов CSS Flexbox.
Однако, он не поддерживается в Internet Explorer 10 и более ранних версий. Если Вам требуется поддержка IE6-10,
нужно использовать поплавки (как показано выше).
Чтобы узнать больше о гибком модуле бокса макета, прочитайте нашу главу 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 выше, мы создали адаптивный макет веб сайта, который варьируется между двумя столбцами и столбцами полной ширины в зависимости от ширины экрана: