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

Скачать файл (0,42Мб)

Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 12.12.2023

Просмотров: 17

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

Верстка сайта

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

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

Заголовка

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

Пример

.header {
    background-color: #F1F1F1;
    text-align: center;
    padding: 20px;
}

Конец формы

Панель навигации

Панель навигации содержит список ссылок, помогающих посетителям перемещаться по веб-сайту:

Пример

/* 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-column (часто используется для мобильных устройств)
2-column (часто используется для планшетов и ноутбуков)
3-column layout (используется только для ПК)

Мы создадим макет из 3 столбцов и изменим его на макет с 1 колонкой для небольших экранов:

Пример

/* Create three equal columns that floats 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%;
    }
}

Начало формы
Конец формы

Неравные столбцы

Основное содержание является самой большой и самой важной частью вашего сайта.

Большая часть пространства при этом резервируется для основного содержимого. Боковое содержимое (если есть) часто используется в качестве альтернативной навигации или для указания информации, относящейся к основному содержимому.

Можно менять ширину, только помните, что она должна быть 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%;
  }
}

Начало формы
Конец формы

Нижний колонтитул

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

Пример

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

Конец формы

Адаптивный макет сайта

С помощью CSS-кода, приведенного ниже создан адаптивный макет веб-сайта:

Пример кода в HTML: