Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
Создать
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Счетчики CSS Макет сайта CSS Единицы измерений CSS Особенности CSS !important CSS Математ. функции

CSS3 Учебник

CSS3 Закругленные углы CSS3 Изображен. граница CSS3 Слои фона изображ. CSS3 Цвета CSS Ключевые сл. цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D Трансформация CSS3 3D Трансформация CSS3 Переход CSS3 Анимация 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 Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

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;
}

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

Попробуйте сами »