Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


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

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



×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.