Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

Презентация на тему Позиционирование блоков исходя из структуры сайта. (Тема 9)

Содержание

2. ПланНеобходимость позиционирования блоков. Сложности и особенности позиционирования
3. Необходимость позиционирования блоковБлоки на сайте необходимо позиционировать
4. Сложности и особенности позиционирования блоков. Успех ВЕРСТКА
5. Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
6. Сложности и особенности позиционирования блоков. На представленном
7. Способы позиционированияМожно использовать следующие способы:Табличный (display:table;display:table-cell;)Блочный (display:inline-block;
8. Табличный способВ данном случае происходит позиционирование при
9. Табличный способ Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
10. Табличный способУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery,
11. Табличный способУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
12. БлочныйПри использовании блочного способа, мы так же
13. БлочныйУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
14. БлочныйПри формировании блоков нет необходимости соблюдать строгие
15. ОбтеканиеДанный способ основан на обтекании бока, другим
16. ОбтеканиеСледует выделить 1-но НО, обтекаемый блок никак
17. Обтекание Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
18. Обтекание Если же мы используем в родителе только
19. ОбтеканиеПомимо св-ва float:left, так же существует и
20. ПозиционныйДанный способ использует свойство position, которое «вытягивает»
21. ПозиционныйВыполните вёрстку следующей структуры:Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
22. ПозиционныйПропишите всем блокам display:table;Для чёрного блока добавьте
23. ПозиционныйСформируйте тот же блок что и в
24. Принадлежность того или иного способа для рационального
25. Конфликты позиционирования и их решение на сайте.Табличный:Отсутствие
26. ОтступыСтиль margin – отступы блока.Записывается в полной
27. ОтступыСтиль padding – внутренний отступ блока;Формат записи соответствует записи margin.Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
28. Домашнее задание Сформировать структуру курсового сайта.Сформировать структуру внутренних
29. Скачать презентацию
30. Похожие презентации

ПланНеобходимость позиционирования блоков. Сложности и особенности позиционирования блоков. Способы позиционирования. Принадлежность того или иного способа для рационального позиционирования блоков на сайте. Конфликты позиционирования и их решение на сайте.Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

Позиционирование блоков исходя из структуры сайтаУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMSОсновной

Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

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

Табличный способ Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Табличный способУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMSПри использовании табличного способа, все

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

БлочныйУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

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

Обтекание Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

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

ПозиционныйВыполните вёрстку следующей структуры:Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

Принадлежность того или иного способа для рационального позиционирования блоков на сайте. Табличный:Содержимое

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

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

ОтступыСтиль padding – внутренний отступ блока;Формат записи соответствует записи margin.Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Домашнее задание Сформировать структуру курсового сайта.Сформировать структуру внутренних блоков.Реализовать позиционирование исходя из необходимости

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

Слайды презентации

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

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

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

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

предотвращения избытка HTML кода, а так же сложностью использования

CSS кода.

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

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 4 Сложности и особенности позиционирования блоков.
Успех ВЕРСТКА САЙТА:

Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

HTML, CSS, jQuery, CMS
Основной сложность является позиционирование по вертикале,

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

Слайд 5 Сложности и особенности позиционирования блоков.
Успех ВЕРСТКА САЙТА:

HTML, CSS, jQuery, CMS

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

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

необходимо отметить что 4 блока одинакового размера, а так

же отступы между блоками одинаковые, а по краям контейнера отступов нет.

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

0 auto; text-align:center;)
Обтекание (float:left;clear:both;)
Позиционный (position:absolute;position:realative;)
Успех ВЕРСТКА САЙТА: HTML, CSS,

jQuery, CMS

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

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

структуры таблицы при помощи display:table, display:table-cell.

Реализуйте данный пример, используя

задание 1.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

class=“tableRow”>

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

CMS

Слайд 10 Табличный способ
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
При

Табличный способУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMSПри использовании табличного способа,

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

или в строке устанавливаются в ряд.

И все соответствующие колонки (первая колонка строки, и все первые колонки остальных строк, будут одной ширины). Ни одна колонка не будет перенесена на новую строку, а будет пропорционально ужиматься.

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

Слайд 11 Табличный способ
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

позиционировать блоки по вертикале относительно друг другу, но если

блоки не вмещаются то они сбрасываются друг под друга.
В отличии от табличного способа.

Единственный минус – между блоками появляется невидимый отступ в размере 2-3 px.

Данный способ удобно использовать, если нет необходимости в соблюдении границ.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 13 Блочный
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

поэтому достаточно использовать конструкцию вида:

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 15 Обтекание
Данный способ основан на обтекании бока, другим содержимым:

Float:left

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

– обозначает что наш блок, относительно других, будет обтекаться

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

влияет на высоту своего родителя.
Если у нас 2 блока

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

Пример на следующем слайде.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 17 Обтекание
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

блоки, то необходимо отменить обтекание при помощи clear:both.

.cfix:after{
content:” “;
display:block;
clear:both;
}

class=“cfix”>

“

”

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 19 Обтекание
Помимо св-ва float:left, так же существует и свойство

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

right, которое идентично, но обтекание совершено по правой стороне.

Выполните

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

из html элемента, и позволяет выставить позицию относительно тэга

body.

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

Успех ВЕРСТКА САЙТА: HTML, CSS,

jQuery, CMS

Слайд 22 Позиционный
Пропишите всем блокам display:table;
Для чёрного блока добавьте св-ва:

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

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 раза больше чем было

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

но при помощи позиционного способа.
Успех ВЕРСТКА САЙТА: HTML, CSS,

jQuery, CMS

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

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

блоков на сайте.

Табличный:
Содержимое по вертикале по центру;
Реализация таблицы.
Блочный:
Отсутствие

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

контролировать ширину блоков;
Сбрасывание крайних блоков на иную строчку.
Блочный:
Мнимые отступы

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

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

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;

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

записи margin.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 28 Домашнее задание
Сформировать структуру курсового сайта.
Сформировать структуру внутренних блоков.
Реализовать

позиционирование исходя из необходимости в проекте.

Успех ВЕРСТКА САЙТА: HTML,

CSS, jQuery, CMS

- Предыдущая Модуль Геометрия часть II № 24-26

Следующая - Притча песок и камень

Что такое findslide.org?

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

Презентация на тему Позиционирование блоков исходя из структуры сайта. (Тема 9)

Содержание

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

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

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

предотвращения избытка HTML кода, а так же сложностью использования

Слайд 4 Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА:

HTML, CSS, jQuery, CMSОсновной сложность является позиционирование по вертикале,

Слайд 5 Сложности и особенности позиционирования блоков. Успех ВЕРСТКА САЙТА:

HTML, CSS, jQuery, CMS

Слайд 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;)Успех ВЕРСТКА САЙТА: HTML, CSS,

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

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

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

class=“tableRow”> Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

Слайд 10 Табличный способУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMSПри

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

Слайд 11 Табличный способУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

позиционировать блоки по вертикале относительно друг другу, но если

Слайд 13 БлочныйУспех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

поэтому достаточно использовать конструкцию вида:

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

– обозначает что наш блок, относительно других, будет обтекаться

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

влияет на высоту своего родителя.Если у нас 2 блока

Слайд 17 Обтекание Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

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

Слайд 19 ОбтеканиеПомимо св-ва float:left, так же существует и свойство

right, которое идентично, но обтекание совершено по правой стороне.Выполните

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

из html элемента, и позволяет выставить позицию относительно тэга

Слайд 21 ПозиционныйВыполните вёрстку следующей структуры:Успех ВЕРСТКА САЙТА: HTML, CSS,

jQuery, CMS

Слайд 22 ПозиционныйПропишите всем блокам display:table;Для чёрного блока добавьте св-ва:

Position:relative; Left:300px; Top:200px; Width:300px; height: 400px;Для красного блока добавьте

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

но при помощи позиционного способа.Успех ВЕРСТКА САЙТА: HTML, CSS,

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

блоков на сайте. Табличный:Содержимое по вертикале по центру;Реализация таблицы.Блочный:Отсутствие

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

контролировать ширину блоков;Сбрасывание крайних блоков на иную строчку.Блочный:Мнимые отступы

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

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

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

записи margin.Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 28 Домашнее задание Сформировать структуру курсового сайта.Сформировать структуру внутренних блоков.Реализовать

позиционирование исходя из необходимости в проекте.Успех ВЕРСТКА САЙТА: HTML,

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

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

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

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

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

Слайд 4 Сложности и особенности позиционирования блоков.
Успех ВЕРСТКА САЙТА:

HTML, CSS, jQuery, CMS
Основной сложность является позиционирование по вертикале,

Слайд 5 Сложности и особенности позиционирования блоков.
Успех ВЕРСТКА САЙТА:

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

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

0 auto; text-align:center;)
Обтекание (float:left;clear:both;)
Позиционный (position:absolute;position:realative;)
Успех ВЕРСТКА САЙТА: HTML, CSS,

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

структуры таблицы при помощи display:table, display:table-cell.

Реализуйте данный пример, используя

class=“tableRow”>

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery,

Слайд 10 Табличный способ
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS
При

Слайд 11 Табличный способ
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

Слайд 13 Блочный
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

Слайд 15 Обтекание
Данный способ основан на обтекании бока, другим содержимым:

Float:left

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

влияет на высоту своего родителя.
Если у нас 2 блока

Слайд 17 Обтекание
Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

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

блоки, то необходимо отменить обтекание при помощи clear:both.

.cfix:after{
content:” “;
display:block;
clear:both;
}

Слайд 19 Обтекание
Помимо св-ва float:left, так же существует и свойство

right, которое идентично, но обтекание совершено по правой стороне.

Выполните

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

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

Успех ВЕРСТКА САЙТА: HTML, CSS,

Слайд 22 Позиционный
Пропишите всем блокам display:table;
Для чёрного блока добавьте св-ва:

Position:relative; Left:300px; Top:200px; Width:300px; height: 400px;
Для красного блока добавьте

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

но при помощи позиционного способа.
Успех ВЕРСТКА САЙТА: HTML, CSS,

блоков на сайте.

Табличный:
Содержимое по вертикале по центру;
Реализация таблицы.
Блочный:
Отсутствие

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

контролировать ширину блоков;
Сбрасывание крайних блоков на иную строчку.
Блочный:
Мнимые отступы

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

top right bottom left;
margin: 12px 0px 30px 10px;

Короткая запись:
Margin:

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

записи margin.

Успех ВЕРСТКА САЙТА: HTML, CSS, jQuery, CMS

Слайд 28 Домашнее задание
Сформировать структуру курсового сайта.
Сформировать структуру внутренних блоков.
Реализовать

позиционирование исходя из необходимости в проекте.

Успех ВЕРСТКА САЙТА: HTML,