Верстка сайтаВеб-сайт часто делится на заголовки, меню, содержание и нижний колонтитул:Есть типы различных конструкций макета на выбор. Однако, структура выше, является одной из наиболее распространенных.ЗаголовкаЗаголовок обычно находится в верхней части веб-сайта (или прямо под верхним навигационным меню). Он часто содержит логотип или название сайта:Пример.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:









Результат:



Задание:

1. 
   Повторить код адаптивного макета сайта.
   
2. 
   Выполнить три макета сайта
   

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

---

Смотрите также файлы

• Черная смерть.docx

• Глобализация. Глобальные проблемы современности. Цель урока.ppt

• Американские президенты.docx

• Предикторы буллинга, кибербуллинга и виктимизации обзор современных исследований.docx

• Управленческие решения.docx