Макет сайта CSS

Макет сайта

Сайт обычно делится на заголовок, меню, содержимое и подвал:

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

Заголовок

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

Пример

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

Результат:

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

Содержание

Какой макет использовать, обычно зависит от вашей целевой аудитории. Самые распространенные макеты - это один из следующих макетов (или их комбинация):

  • Одна колонкаРазметка (обычно используется для мобильных браузеров)
  • Две колонкиРазметка (обычно используется для планшетов и ноутбуков)
  • Три колонкиРазметка (используется только для компьютеров)

Одна колонка:

Две колонки:

Три колонки:

Мы создадим разметку с тремя колонками и изменим ее на одну колонку на экранах с меньшим размером:

Пример

/* Создание трех равных колонок, которые плавают друг旁边 */
.column {
  float: left;
  width: 33.33%;
}
/* Удаление浮动 после колонок */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Респонсивная разметка - стекающая три колонки вместо параллельной на экранах с меньшим размером (ширина 600 пикселей или меньше) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Результат:

Полное справочное руководство по веб-технологиям

Наше справочное руководство охватывает все аспекты веб-технологий.

Включает в себя стандартные технологии W3C: HTML, CSS, XML. И другие технологии, такие как JavaScript, PHP, SQL и т.д.

Онлайн-интерактивные тестовые инструменты

В CodeW3C.com мы предоставляем тысячи примеров.

Используя наш онлайн-редактор, вы можете редактировать эти примеры и экспериментировать с кодом.

Быстрое и легкодоступное обучение

Время - деньги, поэтому мы предоставляем вам быстрое и легкодоступное обучение.

Здесь вы можете получить любую нужную вам информацию через понятный и удобный формат.

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

Совет:Чтобы создать разметку с двумя колонками, измените ширину на 50%. Чтобы создать разметку с четырьмя колонками, используйте 25%.

Совет:Вы хотите узнать, как работает правило @media? Пожалуйста, читайте наше Медиа-запросы CSS Узнайте больше о相关知识 в этой главе.

Совет:Одним из более современных методов создания разметки колонок является использование CSS Flexbox. Однако, Internet Explorer 10 и более ранние версии не поддерживают его. Если вам нужна поддержка IE6-10, пожалуйста, используйте浮动 (как показано выше).

Чтобы узнать больше о модуле Flexible Box разметки, пожалуйста, читайте наше Flexbox в CSS Учебник.

Неравные колонки

Основное содержимое (main content) - это самая большая и важная часть вашего сайта.

Случаи, когда ширина колонок не равна, встречаются часто, так как большая часть пространства отведена под основное содержимое. Дополнительное содержимое (если оно есть) обычно используется в качестве альтернативной навигации или для предоставления информации, связанной с основным содержимым. Вы можете随意 изменить ширину, но не забывайте, что общая сумма должна составлять 100%:

Пример

.column {
  float: left;
}
/* Левая и правая колонки */
.column.side {
  width: 25%;
}
/* Средняя колонка */
.column.middle {
  width: 50%;
}
/* Респонсивная разметка - стекающая три колонки вместо параллельной */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Результат:

Полное справочное руководство по веб-технологиям

Наше справочное руководство охватывает все аспекты веб-технологий.

Включает в себя стандартные технологии W3C: HTML, CSS, XML. И другие технологии, такие как JavaScript, PHP, SQL и т.д.

Онлайн-интерактивные тестовые инструменты

В CodeW3C.com мы предоставляем тысячи примеров.

Используя наш онлайн-редактор, вы можете редактировать эти примеры и экспериментировать с кодом.

Быстрое и легкодоступное обучение

Время - деньги, поэтому мы предоставляем вам быстрое и легкодоступное обучение.

Здесь вы можете получить любую нужную вам информацию через понятный и удобный формат.

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

Подвал

Подвал находится в нижней части страницы. Обычно он содержит информацию о правах собственности и контактах:

Пример

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Результат:

Подвал

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

Адаптивная веб-разметка

Используя上面的 CSS коды, мы создали адаптивную веб-разметку, которая переключается между двумя столбцами и полным столбцом в зависимости от ширины экрана:

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