Позиционирование блоков исходя из структуры сайта

Июль 25, 2022

Главная
Информатика
Позиционирование блоков исходя из структуры сайта

Содержание

2. План Необходимость позиционирования блоков. Сложности и особенности позиционирования блоков. Способы позиционирования. Принадлежность того или иного способа
3. Необходимость позиционирования блоков Блоки на сайте необходимо позиционировать для предотвращения избытка HTML кода, а так же
4. Сложности и особенности позиционирования блоков. Основной сложность является позиционирование по вертикале, сложностью том плане что блоки
5. Сложности и особенности позиционирования блоков.
6. Сложности и особенности позиционирования блоков. На представленном примере необходимо отметить что 4 блока одинакового размера, а
7. Способы позиционирования Можно использовать следующие способы: Табличный (display:table;display:table-cell;) Блочный (display:inline-block; margin: 0 auto; text-align:center;) Обтекание (float:left;clear:both;)
8. Табличный способ В данном случае происходит позиционирование при формировании структуры таблицы при помощи display:table, display:table-cell. Реализуйте
9. Табличный способ
10. Табличный способ При использовании табличного способа, все колонки, которые используются в таблице или в строке устанавливаются
11. Табличный способ
12. Блочный При использовании блочного способа, мы так же можем позиционировать блоки по вертикале относительно друг другу,
13. Блочный
14. Блочный При формировании блоков нет необходимости соблюдать строгие отступы, поэтому достаточно использовать конструкцию вида: .list{ text-align:
15. Обтекание Данный способ основан на обтекании бока, другим содержимым: Float:left – обозначает что наш блок, относительно
16. Обтекание Следует выделить 1-но НО, обтекаемый блок никак не влияет на высоту своего родителя. Если у
17. Обтекание
18. Обтекание Если же мы используем в родителе только обтекаемые блоки, то необходимо отменить обтекание при помощи
19. Обтекание Помимо св-ва float:left, так же существует и свойство right, которое идентично, но обтекание совершено по
20. Позиционный Данный способ использует свойство position, которое «вытягивает» элемент из html элемента, и позволяет выставить позицию
21. Позиционный Выполните вёрстку следующей структуры:
22. Позиционный Пропишите всем блокам display:table; Для чёрного блока добавьте св-ва: Position:relative; Left:300px; Top:200px; Width:300px; height: 400px;
23. Позиционный Сформируйте тот же блок что и в Обтекании, но при помощи позиционного способа.
24. Принадлежность того или иного способа для рационального позиционирования блоков на сайте. Табличный: Содержимое по вертикале по
25. Конфликты позиционирования и их решение на сайте. Табличный: Отсутствие возможности контролировать ширину блоков; Сбрасывание крайних блоков
26. Отступы Стиль margin – отступы блока. Записывается в полной форма: Margin: top right bottom left; margin:
27. Отступы Стиль padding – внутренний отступ блока; Формат записи соответствует записи margin.
28. Вывод Необходимо решать вопросы размещения блоков путём позиционирования. Использовать Табличный способ при необходимости размещать содержимое блоков
29. Задачи для решения На абсолютное позиционирование Повторите страницу по данному по образцу:
37. Скачать презентацию

Слайд 2

План
Необходимость позиционирования блоков.
Сложности и особенности позиционирования блоков.
Способы позиционирования.
Принадлежность

того или иного способа для рационального позиционирования блоков на сайте.
Конфликты позиционирования и их решение на сайте.

Слайд 3

Необходимость позиционирования блоков
Блоки на сайте необходимо позиционировать для предотвращения избытка HTML

кода, а так же сложностью использования CSS кода.
Если игнорировать позиционирование, нет необходимости соблюдать структуру сайта, а это влечёт затраты времени на реализацию поставленной задачи.
Основная сложность в позиционировании блоков по вертикале и для реализации можно использовать 3 способа, которые присущи для отдельных случаев.

Слайд 4

Сложности и особенности позиционирования блоков.
Основной сложность является позиционирование по вертикале,

сложностью том плане что блоки бывают объёмными.
В данном случае блоки достаточно пустые чтобы разгружены.

Слайд 5

Сложности и особенности позиционирования блоков.

Слайд 6

Сложности и особенности позиционирования блоков.
На представленном примере необходимо отметить что

4 блока одинакового размера, а так же отступы между блоками одинаковые, а по краям контейнера отступов нет.
В данном случае гораздо сложнее реализовать позиционирование блоков.

Слайд 7

Способы позиционирования
Можно использовать следующие способы:
Табличный (display:table;display:table-cell;)
Блочный (display:inline-block; margin: 0 auto; text-align:center;)
Обтекание

(float:left;clear:both;)
Позиционный (position:absolute;position:realative;)

Слайд 8

Табличный способ
В данном случае происходит позиционирование при формировании структуры таблицы при

помощи display:table, display:table-cell.
Реализуйте данный пример, используя задание 1.

Слайд 9

Табличный способ

class=“item”>

Слайд 10

Табличный способ
При использовании табличного способа, все колонки, которые используются в таблице

или в строке устанавливаются в ряд.
И все соответствующие колонки (первая колонка строки, и все первые колонки остальных строк, будут одной ширины). Ни одна колонка не будет перенесена на новую строку, а будет пропорционально ужиматься.
Данный способ необходим для позиционирования содержимого сайта относительно друг друга по вертикале по центру. Так же можно позиционировать и по верху и по низу.
(vertical-align: top bottom middle;)

Слайд 11

Табличный способ

Слайд 12

Блочный
При использовании блочного способа, мы так же можем позиционировать блоки по

вертикале относительно друг другу, но если блоки не вмещаются то они сбрасываются друг под друга.
В отличии от табличного способа.
Единственный минус – между блоками появляется невидимый отступ в размере 2-3 px.
Данный способ удобно использовать, если нет необходимости в соблюдении границ.

Слайд 13

Блочный

Слайд 14

Блочный
При формировании блоков нет необходимости соблюдать строгие отступы, поэтому достаточно использовать

конструкцию вида:

.list{
text-align: center;
}
.item{
display:inline-block;
margin: 0px 40px;
}
Реализуйте пример используя картинки и тексты, задание 2.

Слайд 15

Обтекание
Данный способ основан на обтекании бока, другим содержимым:
Float:left – обозначает что

наш блок, относительно других, будет обтекаться слева, т.к. будет находиться относительно всего другого содержимого слева.

Слайд 16

Обтекание
Следует выделить 1-но НО, обтекаемый блок никак не влияет на высоту

своего родителя.
Если у нас 2 блока которые обтекают друг друга (присвоено обоим св-во float:left), и в родителе нет никаких других элементов,
То высота родителя будет 0px.
Иначе, если есть блоки без обтекания, то высота относительно этого бока.
Пример на следующем слайде.

Слайд 17

Обтекание

Слайд 18

Обтекание
Если же мы используем в родителе только обтекаемые блоки, то необходимо

отменить обтекание при помощи clear:both.
.cfix:after{
content:” “;
display:block;
clear:both;
}

“

”

Слайд 19

Обтекание
Помимо св-ва float:left, так же существует и свойство right, которое идентично,

но обтекание совершено по правой стороне.
Выполните задание из шаблона flowers (Главная.psd).
Сверстайте блок «ЧТО ТАКОЕ АУКЦИОН FLORA HOLLAND?».

Слайд 20

Позиционный
Данный способ использует свойство position, которое «вытягивает» элемент из html элемента,

и позволяет выставить позицию относительно тэга body.
Position:absolute – позиционирование относительно тэга body;
Position:fixed – позиционирование относительно окна клинекта (браузера), и позиция элемента фиксируется при прокрутке.
Position:static – исходное значение всех html тэгов, позиционирования, относительно других тэгов.
Position:relative – позиционирование относительно текущего места, не «вытягивая» элемент из кода.

Слайд 21

Позиционный
Выполните вёрстку следующей структуры:

Слайд 22

Позиционный
Пропишите всем блокам display:table;
Для чёрного блока добавьте св-ва: Position:relative; Left:300px; Top:200px;

Width:300px; height: 400px;
Для красного блока добавьте св-ва: ширину и высоту на 100px меньше чем у чёрного; Position:absolute; Left: 50px; Top:50px;
Для тэга body пропишите высоту 2000px;
Для чёрного блока пропишите св-во position:fixed;
Для красного пропишите position:static;
Создайте в чёрном блоке тэг P и наполните его текстом;
Пропишите чёрного блоку padding-left:115px; position:relative; min-height: 100px;
Красному блоку пропишите ширину и высоту по 100px, position:absolute; left:0px; top:calc(50% - 50px); background-color:#eee;
Добавьте чёрному блоку текста в 3 раза больше чем было

Слайд 23

Позиционный
Сформируйте тот же блок что и в Обтекании, но при помощи

позиционного способа.

Слайд 24

Принадлежность того или иного способа для рационального позиционирования блоков на сайте.

Табличный:
Содержимое по вертикале по центру;
Реализация таблицы.
Блочный:
Отсутствие необходимости наличия межблочных отступов;
Позиционировать ряд по центру;
Позиционировать блоки относительно друг друга по центру или иным параметрам.
Обтекание:
Необходимости учёта межблочных отступов;
Смена позиций обтекаемых блоков без вмешательства в HTML;
Точные размеры блоков;
Позиционный:
Небольшие блочные конструкции;
Позиционирование по вертикале по центру;
Гибкое размещение позиционных блоков.

Слайд 25

Конфликты позиционирования и их решение на сайте.
Табличный:
Отсутствие возможности контролировать ширину блоков;
Сбрасывание

крайних блоков на иную строчку.
Блочный:
Мнимые отступы между блоками;
Сбрасывание не вмещаемых блоков на новую строку.
Обтекание:
Не учитывается высота обтекаемого блока для родителя.
Позиционный:
Минус использования конкретных значений (left:30px; top:50%;);
Реализация сложных конструкций (3 и более элементов в раде).

Слайд 26

Отступы
Стиль margin – отступы блока.
Записывается в полной форма:
Margin: top right bottom

left;
margin: 12px 0px 30px 10px;
Короткая запись:
Margin: top (right left) bottom;
margin: 10px 30px 20px;
Margin: (top bottom) (right left);
margin: 10px 30px;
Margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

Слайд 27

Отступы
Стиль padding – внутренний отступ блока;
Формат записи
соответствует записи margin.

Слайд 28

Вывод
Необходимо решать вопросы размещения блоков путём позиционирования.
Использовать Табличный способ при необходимости

размещать содержимое блоков по вертикале по центру или при реализации таблицы.
Использовать Блочный способ при отсутствии необходимости учёта межблочных отступов.
Использовать Обтекаемый способ для реализации точных конструкций (по отступам).
Использовать Позиционный способ для реализации небольших конструкций.

Слайд 29

Задачи для решения На абсолютное позиционирование
Повторите страницу по данному по образцу:

Слайд 30

Слайд 31

Слайд 32

Слайд 33

Слайд 34

Слайд 35

Позиционирование блоков исходя из структуры сайта

Содержание

ПланНеобходимость позиционирования блоков. Сложности и особенности позиционирования блоков. Способы позиционирования. Принадлежность

Необходимость позиционирования блоковБлоки на сайте необходимо позиционировать для предотвращения избытка HTML

Сложности и особенности позиционирования блоков. Основной сложность является позиционирование по вертикале,

Сложности и особенности позиционирования блоков.

Сложности и особенности позиционирования блоков. На представленном примере необходимо отметить что

Способы позиционированияМожно использовать следующие способы:Табличный (display:table;display:table-cell;)Блочный (display:inline-block; margin: 0 auto; text-align:center;)Обтекание

Табличный способВ данном случае происходит позиционирование при формировании структуры таблицы при

Табличный способ

Табличный способПри использовании табличного способа, все колонки, которые используются в таблице

Табличный способ

БлочныйПри использовании блочного способа, мы так же можем позиционировать блоки по

Блочный

БлочныйПри формировании блоков нет необходимости соблюдать строгие отступы, поэтому достаточно использовать

ОбтеканиеДанный способ основан на обтекании бока, другим содержимым:Float:left – обозначает что

ОбтеканиеСледует выделить 1-но НО, обтекаемый блок никак не влияет на высоту

Обтекание

Обтекание Если же мы используем в родителе только обтекаемые блоки, то необходимо

ОбтеканиеПомимо св-ва float:left, так же существует и свойство right, которое идентично,

ПозиционныйДанный способ использует свойство position, которое «вытягивает» элемент из html элемента,

ПозиционныйВыполните вёрстку следующей структуры:

ПозиционныйПропишите всем блокам display:table;Для чёрного блока добавьте св-ва: Position:relative; Left:300px; Top:200px;

ПозиционныйСформируйте тот же блок что и в Обтекании, но при помощи

Принадлежность того или иного способа для рационального позиционирования блоков на сайте.

Конфликты позиционирования и их решение на сайте.Табличный:Отсутствие возможности контролировать ширину блоков;Сбрасывание

ОтступыСтиль margin – отступы блока.Записывается в полной форма:Margin: top right bottom

ОтступыСтиль padding – внутренний отступ блока;Формат записи соответствует записи margin.

ВыводНеобходимо решать вопросы размещения блоков путём позиционирования.Использовать Табличный способ при необходимости

Задачи для решения На абсолютное позиционирование Повторите страницу по данному по образцу:

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

План
Необходимость позиционирования блоков.
Сложности и особенности позиционирования блоков.
Способы позиционирования.
Принадлежность

Необходимость позиционирования блоков
Блоки на сайте необходимо позиционировать для предотвращения избытка HTML

Сложности и особенности позиционирования блоков.
Основной сложность является позиционирование по вертикале,

Сложности и особенности позиционирования блоков.
На представленном примере необходимо отметить что

Способы позиционирования
Можно использовать следующие способы:
Табличный (display:table;display:table-cell;)
Блочный (display:inline-block; margin: 0 auto; text-align:center;)
Обтекание

Табличный способ
В данном случае происходит позиционирование при формировании структуры таблицы при

Табличный способ
При использовании табличного способа, все колонки, которые используются в таблице

Блочный
При использовании блочного способа, мы так же можем позиционировать блоки по

Блочный
При формировании блоков нет необходимости соблюдать строгие отступы, поэтому достаточно использовать

Обтекание
Данный способ основан на обтекании бока, другим содержимым:
Float:left – обозначает что

Обтекание
Следует выделить 1-но НО, обтекаемый блок никак не влияет на высоту

Обтекание
Если же мы используем в родителе только обтекаемые блоки, то необходимо

Обтекание
Помимо св-ва float:left, так же существует и свойство right, которое идентично,

Позиционный
Данный способ использует свойство position, которое «вытягивает» элемент из html элемента,

Позиционный
Выполните вёрстку следующей структуры:

Позиционный
Пропишите всем блокам display:table;
Для чёрного блока добавьте св-ва: Position:relative; Left:300px; Top:200px;

Позиционный
Сформируйте тот же блок что и в Обтекании, но при помощи

Конфликты позиционирования и их решение на сайте.
Табличный:
Отсутствие возможности контролировать ширину блоков;
Сбрасывание

Отступы
Стиль margin – отступы блока.
Записывается в полной форма:
Margin: top right bottom

Отступы
Стиль padding – внутренний отступ блока;
Формат записи
соответствует записи margin.

Вывод
Необходимо решать вопросы размещения блоков путём позиционирования.
Использовать Табличный способ при необходимости

Задачи для решения На абсолютное позиционирование
Повторите страницу по данному по образцу: