Блочная вёрстка презентация

Содержание

Виды верстки Блочная верстка Табличная верстка Верстка flexbox

Слайд 1Блочная вёрстка
Данильченко Анна Александровна
Преподаватель кафедры программного обеспечения систем ЖГТУ

Слайд 2Виды верстки
Блочная верстка
Табличная верстка
Верстка flexbox

Слайд 3Табличная верстка Создаётся с помощью обычной таблицы, таблица делится на колонки, а

колонки на ячейки, в каждой ячейке можно расположить то, что вам требуется шапка, меню, контент, подвал и всё что должно быть по задумке на сайте.






Заголовок сайта
Левая колонка Контент Правая колонка
Подвал страницы

Слайд 4Блочная верстка





id="sidebarR">





Слайд 5Табличная верстка

Слайд 6Блочная верстка

Слайд 7Блочная верстка
- является блочным элементом и предназначен для выделения фрагмента

документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей.
- Обязателен! 

Слайд 11float

Left - Выравнивает элемент по левому краю, а все остальные элементы,

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


None -Обтекание элемента не задается. (по умолчанию)


Inherit - Наследует значение родителя.

Слайд 12Пример
 float:left;
 нижняя граница предыдущего плавучего блока
А если высота первого пункта оказалась

бы больше

Слайд 13position
Absolute - абсолютно позиционирован, при этом другие элементы отображаются на веб-странице

словно абсолютно позиционированного элемента и нет
Положение элемента задается свойствами:
left
top
 right 
 bottom

Слайд 14fixed
привязывается к указанной свойствами left, top, right и bottomточке на экране и не меняет своего положения

при прокрутке веб-страницы

Слайд 15relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента

и сдвигает его в ту или иную сторону от первоначального расположения.

Absolute

relative

Слайд 16static
Элементы отображаются как обычно. Использование свойств  left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует

значение родителя.

Слайд 17z-index
Любые позиционированные элементы на веб-странице могут накладываться друг на друга в

определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index.

Для  position задано как absolute, fixed или relative.

Слайд 18z-index: число | auto | inherit
Число - Чем больше значение, тем

выше находится элемент по сравнению с теми элементами, у которых оно меньше.
auto — порядок элементов в этом случае строится автоматически, исходя из их положения в коде HTML
 inherit указывает, что оно наследуется у родителя.

Слайд 19Пример
Слой 1 наверху
Ссылка 1
Ссылка

2

Слой 4 наверху


Слой 3

Слой 4

#layer1 { z-index: 2; }
#layer2 { z-index: 1; }
#layer3 { z-index: 3; }
#layer4 { z-index: 4; }

#layer1, #layer2, #layer3, #layer4 {
position: relative; /* Относительное позиционирование */

Слайд 20Пример

.block1 {
width: 200px;
background: #ccc;
padding: 5px;
padding-right: 20px;

border: solid 1px black;
float: left;
}
.block2 {
width: 200px;
background: #fc0;
padding: 5px;
border: solid 1px black;
float: left;
position: relative;
top: 40px;
left: -70px;
}

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet
dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.

Слайд 21Пример
Жесткая HTML & CSS верстка блоками

Слайд 22Пример
Резиновая HTML & CSS верстка блоками

Слайд 23Flexbox
Главная задумка flex-вёрстки в наделении контейнера способностью изменять ширину/высоту (и порядок)

своих элементов для наилучшего заполнения пространства (в большинстве случаев — для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.

Слайд 29display: flex | inline-flex;
Применяется к: родительскому элементу flex-контейнера.
Определяет flex-контейнер (инлайновый или блочный

в зависимости от выбранного значения), подключает flex-контекст для всех его непосредственных потомков.

Слайд 31Пример
HTML

Я ПЕРВЫЙ
Я ВТОРОЙ
Я ТРЕТИЙ

Я ЧЕТВЕРТЫЙ



.flex {
height:640px;
}
.flex div {
float:left;
background:#039;
border-radius:5px;
padding:5px;
margin-left:10px;
}
.flex div:first-child {
background:#090;
}
.flex div:last-child {
background:#C00;
}

Слайд 32Включим flexbox
.flex {
height:640px;
display:flex;
}

Слайд 34Меняем направление по оси
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:row-reverse;
}

Слайд 35Поворачиваем саму ось
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column;
}

Слайд 36Меняем направление по оси
.flex {
height:640px;
display:flex;
background: #838283;
flex-direction:column-reverse;
}

Слайд 38Пример
.flex {
height:640px;
display:flex;
background: #838283;
}
.flex {

height:640px;
display:flex;
background: #838283;
justify-content:flex-end;
}

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
}

Слайд 40Пример
.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:flex-end;
}
.flex {

height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:stretch;
}

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:center;
}

Слайд 41Перестановка
Применяется к: дочернему элементу
order:

Слайд 42.flex div:first-child {
background:#090;
order:2;
}
.flex div:last-child {
background:#C00;
order:1;

}
.flex div:nth-child(2) {
order:3;
}

Слайд 43flex-grow- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «вырастать» при необходимости.
flex-grow:

(по умолчанию 0)

.flex div:first-child {
background:#090;
flex-grow:1;
}
.flex div:last-child {
background:#C00;
}
.flex div:nth-child(2) {
flex-grow:2;
}

Слайд 44flex-shrink- Применяется к: дочернему элементу. Определяет для flex-элемента возможность «сжиматься» при необходимости.
flex-basis-

Применяется к: дочернему элементу. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере.

Слайд 45Align-self – выравнивание отдельного элемента(Применяется к: дочернему элементу)
.flex div:nth-child(2) {
flex-grow:1;
align-self:flex-start;

}

.flex {
height:640px;
display:flex;
background: #838283;
justify-content:center;
align-items:stretch;
}

align-self: auto | flex-start | flex-end | center | baseline | stretch

Слайд 47Читать
Поддержка Flexbox в браузерах
Таблица соответствия F09 и F11
Таблица соответствия F09 и

F11 для IE10
CSS3 Flexplorer
Использование Flexbox от Mozilla
Руководство по Flexbox от Microsoft

Слайд 48Задание

Слайд 49Вопросы

Похожие презентации

Работа UMG и Audio в UE4 274
Компьютерные игры 232
Работы учеников в Еxcel 292
Делаем баннер 252
Классификация технологических подходов: строгие (каркасные, генетические и на основе формальных преобразований) 371
Message Passing Interface 275

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.

Для правообладателей

Яндекс.Метрика