CSS макет веб-сайта
Макет сайта
Веб-сайт часто делится на заголовки, меню, контент и нижний колонтитул:
Есть множество различных дизайнов макетов на выбор. Тем не менее, приведенная выше структура является одной из наиболее распространенных, и мы рассмотрим ее подробнее в этом уроке.
Заголовок
Заголовок обычно располагается в верхней части веб-сайта (или прямо под верхним навигационным меню). Часто содержит логотип или название веб-сайта:
Пример
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Результат
Header
Панель навигации
Панель навигации содержит список ссылок, помогающих посетителям перемещаться по вашему сайту:
Пример
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Результат
Содержание
Макет в этом разделе часто зависит от целевых пользователей. Наиболее распространенный макет - это один (или их комбинация) из следующего:
- 1 столбец (часто используется в мобильных браузерах)
- 2-колоночный (часто используется для планшетов и ноутбуков)
- Макет в 3 столбца (используется только для настольных компьютеров)
1-столбец:
2-столбец:
3 столбца:
Мы создадим макет с 3 столбцами и изменим его на макет с 1 столбцом на небольших экранах:
Пример
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Результат
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
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 Media Queries .
Совет: более современный способ создания макетов столбцов — использование CSS Flexbox. Однако он не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте числа с плавающей запятой (как показано выше).
Чтобы узнать больше о модуле Flexible Box Layout, прочитайте нашу главу CSS Flexbox .
Неравные столбцы
Основной контент — это самая большая и важная часть вашего сайта.
Это обычное дело с неравной шириной столбцов, так что большая часть места зарезервирована для основного контента. Дополнительный контент (если он есть) часто используется в качестве альтернативной навигации или для указания информации, относящейся к основному контенту. Измените ширину по своему усмотрению, только помните, что в сумме она должна составлять 100%:
Пример
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Результат
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
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.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Нижний колонтитул
Нижний колонтитул размещается внизу страницы. Он часто содержит информацию об авторских правах и контактную информацию:
Пример
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Результат
Адаптивный макет сайта
Используя приведенный выше код CSS, мы создали адаптивный макет веб-сайта, который варьируется от двух столбцов до столбцов полной ширины в зависимости от ширины экрана:
Вы когда- нибудь слышали о W3Schools Spaces ? Здесь вы можете создать свой сайт с нуля или использовать шаблон и разместить его бесплатно.
Начните бесплатно ❯* кредитная карта не требуется