САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Макет Веб Сайта



Макет сайта

Веб сайт делится на заголовки, меню, содержимое и нижний колонтитул:

Есть масса различных макетов на выбор. Тем не менее, структура в примере выше, является одним из наиболее распространенных, и мы более подробно рассмотрим его в этом уроке.


Заголовок

Заголовок обычно находится в верхней части веб сайта (или прямо под верхним меню навигации). Часто содержит логотип или название сайта:

Пример

.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 выше, мы создали адаптивный макет веб сайта, который варьируется между двумя столбцами и столбцами полной ширины в зависимости от ширины экрана:

Редактор кода »