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

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

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

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

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

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

Презентация на тему Позиционирование, Декоративные элементы

Содержание

ПозиционированиеГибкий механизм расположения элементов.Не используется для создания сеток.Используется для создания декоративных эффектов и многослойных элементов интерфейса.
Позиционирование,Декоративные элементы ПозиционированиеГибкий механизм расположения элементов.Не используется для создания сеток.Используется для создания декоративных эффектов и многослойных элементов интерфейса. Свойства позиционирования Режимы позиционирования Относительное позиционированиеСмещение элемента относительно своего положения.Управление точкой отсчёта абсолютных элементов.Участвует в «наслаивании».position:relative; Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative; Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative;Место в потоке Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative; height: 100px;Место в потоке /* смещениевправо-влево */right left/* смещениевверх-вниз */top bottomСмещение элементаНе используйте противоположные свойства одновременно— они конфликтуют. Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative; top: 50px;left: 100px;Место в потоке100px50px Абсолютное позиционированиеЭлемент выпадает из потока.Сжимается под содержимое.Гибкая модель позиционирования.Свойства задания координат ведут себя по-другому.Участвует в «наслаивании».position:absolute; Выпадение из потокаdiv 1position: static;div 3position: static;div 2position: static;div 1position: static;positiondiv 2 div 3 absolute; static; Координаты абсолютного элемента(0, 0)YX Привязка к верхнему левому углуposition: absolute; top: 50px;left: 50px;50px50px Привязка к правому нижнему углуposition: absolute; bottom: 50px; right: 50px;50px50px Изменение точки привязкиposition: absolute; bottom: 50px; right: 50px;50px50pxposition: relative; Изменение точки привязкиposition: absolute; bottom: 50px; right: 50px;50px50pxposition: relative; Размеры с помощью координатposition: absolute; left: 50px;right: 50px;50px 50px Изменение точки привязкиЕсли среди родителей абсолютного элемента есть тег с относительным позиционированием, Относительные координатыposition: absolute; top: 50%;left: 50%;50% высоты браузера50% ширины браузера Относительные координатыrelativetop: 50%;left: 50%;50% высоты блока50% ширины блокаposition: absolute; Центровкаposition: absolute; Центровкаposition: absolute; top: 50%;left: 50%; width: 100px; height: 100px;margin-top: -50px; margin-left: -50px; Относительные размерыПривязка происходит не только для точки отсчёта координат, но и для position: absolute; width: 50%;height: 50%;Относительные координаты50% ширины браузера50% высоты браузера Относительные координатыposition: absolute; width: 50%;height: 50%;50% ширины блока50% высоты блокаrelative Положение по умолчаниюПоложение по умолчанию — это когда у всех координат значение Координаты по умолчаниюstaticstaticstatic Координаты по умолчаниюstaticstaticabsolute Координаты по умолчаниюstaticstaticabsolute right: 50px; Координаты по умолчаниюstaticstaticabsolute right: 50px;static Положение по умолчаниюЕсли абсолютному элементу не задавать никаких координат, то он привязывается Фиксированное позиционированиеПохоже на абсолютное позиционирование.Отсчёт координат всегда привязан к окну браузера.Элемент «прибивается» Закреплённое позиционированиеКомбинация относительного и фиксированного.Поддержка пока слабая. http://caniuse.com/#feat=css-stickyДемонстрация. http://jsfiddle.net/daker/ecpTw/lightposition:sticky; Управление порядком слоёвz-index: 10;У кого больше индекс, тот и выше.Выше тот, кто Управление порядком слоёв…class=class="layer3">"> Управление порядком слоёвdiv.layer2 position: relative; z-index: 2;div.layer3 position: absolute; z-index: 4;div.layer5position: relative;z-index: div::before { content: Псевдоэлементы ::before или :before?В стандарте псевдоэлементы используют ::,псевдоклассы : Растровые спрайты Растровые спрайты Растровые спрайты Нормализация стилейЕсли хочется нормализовать стили, то можно использоватьnormalize.css.http://necolas.github.io/normalize.css/ Подключение normalize.css Текстовая «Барбершопа» без стилей Текстовая с нормализацией Текстовая со сброшенными стилями
Слайды презентации

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

ПозиционированиеГибкий механизм расположения элементов.Не используется для создания сеток.Используется для создания декоративных эффектов и многослойных элементов интерфейса.

для создания декоративных эффектов и многослойных элементов интерфейса.

Слайд 3 Свойства позиционирования

Свойства позиционирования

Слайд 4 Режимы позиционирования

Режимы позиционирования

Слайд 5 Относительное позиционирование
Смещение элемента относительно своего положения.
Управление точкой отсчёта

Относительное позиционированиеСмещение элемента относительно своего положения.Управление точкой отсчёта абсолютных элементов.Участвует в «наслаивании».position:relative;

абсолютных элементов.
Участвует в «наслаивании».
position:
relative;

Слайд 6


Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative;

Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative;

Слайд 7


Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative;


Место

Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative;Место в потоке

в потоке



Слайд 8


Смещение элемента

div 1
position: static;

div 3
position: static;

div 2
position: relative;

Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative; height: 100px;Место в потоке

height: 100px;


Место в потоке



Слайд 9 /* смещение
вправо-влево */
right left
/* смещение
вверх-вниз */
top bottom
Смещение элемента
Не

/* смещениевправо-влево */right left/* смещениевверх-вниз */top bottomСмещение элементаНе используйте противоположные свойства одновременно— они конфликтуют.

используйте противоположные свойства одновременно
— они конфликтуют.

Слайд 10 Смещение элемента




div 1
position: static;

div 3
position: static;

div 2
position: relative;

Смещение элементаdiv 1position: static;div 3position: static;div 2position: relative; top: 50px;left: 100px;Место в потоке100px50px

top: 50px;
left: 100px;


Место в потоке





100px

50px

Слайд 11 Абсолютное позиционирование
Элемент выпадает из потока.
Сжимается под содержимое.
Гибкая модель

Абсолютное позиционированиеЭлемент выпадает из потока.Сжимается под содержимое.Гибкая модель позиционирования.Свойства задания координат ведут себя по-другому.Участвует в «наслаивании».position:absolute;

позиционирования.
Свойства задания координат ведут себя по-другому.
Участвует в «наслаивании».
position:
absolute;

Слайд 12


Выпадение из потока

div 1
position: static;

div 3
position: static;

div 2
position:

Выпадение из потокаdiv 1position: static;div 3position: static;div 2position: static;div 1position: static;positiondiv 2 div 3 absolute; static;

static;

div 1
position: static;



position


div 2 div 3 absolute; static;


Слайд 13 Координаты абсолютного элемента









(0, 0)
Y
X

Координаты абсолютного элемента(0, 0)YX

Слайд 14

Привязка к верхнему левому углу







position: absolute; top: 50px;
left:

Привязка к верхнему левому углуposition: absolute; top: 50px;left: 50px;50px50px

50px;








50px





50px

Слайд 15

Привязка к правому нижнему углу







position: absolute; bottom: 50px;

Привязка к правому нижнему углуposition: absolute; bottom: 50px; right: 50px;50px50px

right: 50px;





















50px





50px

Слайд 16

Изменение точки привязки
position: absolute; bottom: 50px; right: 50px;





















50px





50px



position:

Изменение точки привязкиposition: absolute; bottom: 50px; right: 50px;50px50pxposition: relative;

relative;

Слайд 17

Изменение точки привязки
position: absolute; bottom: 50px; right: 50px;



























50px





50px



position:

Изменение точки привязкиposition: absolute; bottom: 50px; right: 50px;50px50pxposition: relative;

relative;

Слайд 18

Размеры с помощью координат
position: absolute; left: 50px;
right: 50px;



















50px 50px

Размеры с помощью координатposition: absolute; left: 50px;right: 50px;50px 50px

Слайд 19 Изменение точки привязки
Если среди родителей абсолютного элемента есть

Изменение точки привязкиЕсли среди родителей абсолютного элемента есть тег с относительным

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

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

Слайд 20

Относительные координаты







position: absolute; top: 50%;
left: 50%;











50% высоты браузера







50%

Относительные координатыposition: absolute; top: 50%;left: 50%;50% высоты браузера50% ширины браузера

ширины браузера

Слайд 21


Относительные координаты


relative








top: 50%;
left: 50%;
50% высоты блока
50% ширины блока
position:

Относительные координатыrelativetop: 50%;left: 50%;50% высоты блока50% ширины блокаposition: absolute;

absolute;

Слайд 22


Центровка










position: absolute;

Центровкаposition: absolute;

Слайд 23


Центровка








position: absolute; top: 50%;
left: 50%; width: 100px; height:

Центровкаposition: absolute; top: 50%;left: 50%; width: 100px; height: 100px;margin-top: -50px; margin-left: -50px;

100px;
margin-top: -50px; margin-left: -50px;

Слайд 24 Относительные размеры
Привязка происходит не только для точки отсчёта

Относительные размерыПривязка происходит не только для точки отсчёта координат, но и

координат, но и для относительных размеров.
position:
absolute;
/* ширина и
высота
абсолютного
равны
половине
width: height:
50%;
50%;
ширины

и

высоты

родителя */

Слайд 25


position: absolute; width: 50%;
height: 50%;
Относительные координаты















50% ширины браузера














50%

position: absolute; width: 50%;height: 50%;Относительные координаты50% ширины браузера50% высоты браузера

высоты браузера

Слайд 26





Относительные координаты










position: absolute; width: 50%;
height: 50%;
50% ширины блока




50%

Относительные координатыposition: absolute; width: 50%;height: 50%;50% ширины блока50% высоты блокаrelative

высоты блока

relative

Слайд 27 Положение по умолчанию
Положение по умолчанию — это когда

Положение по умолчаниюПоложение по умолчанию — это когда у всех координат

у всех координат значение auto.


top: auto;
right: bottom:
auto; auto;
left: auto;

Слайд 28


Координаты по умолчанию

static




static



static

Координаты по умолчаниюstaticstaticstatic

Слайд 29


Координаты по умолчанию

static




static



absolute


Координаты по умолчаниюstaticstaticabsolute

Слайд 30

Координаты по умолчанию






static






static


absolute right: 50px;







Координаты по умолчаниюstaticstaticabsolute right: 50px;

Слайд 31

Координаты по умолчанию






static










static


absolute right: 50px;








static

Координаты по умолчаниюstaticstaticabsolute right: 50px;static

Слайд 32 Положение по умолчанию
Если абсолютному элементу не задавать никаких

Положение по умолчаниюЕсли абсолютному элементу не задавать никаких координат, то он

координат, то он привязывается левым верхним углом к той

точке, где был бы, если бы был нормальным.

Если эта точка смещается — он смещается вместе с ней.
Из этой точки его можно смещать внешними отступами
(margin).

Слайд 33 Фиксированное позиционирование
Похоже на абсолютное позиционирование.
Отсчёт координат всегда привязан

Фиксированное позиционированиеПохоже на абсолютное позиционирование.Отсчёт координат всегда привязан к окну браузера.Элемент

к окну браузера.
Элемент «прибивается» к точке экрана и не

смещается даже при прокрутке.

Участвует в «наслаивании».

position:

fixed;

Слайд 34 Закреплённое позиционирование
Комбинация относительного и фиксированного.
Поддержка пока слабая. http://caniuse.com/#feat=css-sticky
Демонстрация.

Закреплённое позиционированиеКомбинация относительного и фиксированного.Поддержка пока слабая. http://caniuse.com/#feat=css-stickyДемонстрация. http://jsfiddle.net/daker/ecpTw/lightposition:sticky;

http://jsfiddle.net/daker/ecpTw/light
position:
sticky;

Слайд 35 Управление порядком слоёв
z-index: 10;

У кого больше индекс, тот

Управление порядком слоёвz-index: 10;У кого больше индекс, тот и выше.Выше тот,

и выше.
Выше тот, кто дальше в коде, если индекса

нет или он одинаковый.
Индекс работает только для относительных, абсолютных и фиксированных.

Слайд 36


Управление порядком слоёв



…


class="layer2">


class="layer3">

class="layer3"> ">Управление порядком слоёв…class=class="layer3">">

Слайд 37
Управление порядком слоёв


div.layer2 position: relative; z-index: 2;


div.layer3 position:

Управление порядком слоёвdiv.layer2 position: relative; z-index: 2;div.layer3 position: absolute; z-index: 4;div.layer5position:

absolute; z-index: 4;


div.layer5
position: relative;
z-index: 1;


div.layer6 position: absolute; z-index: 3;







div.layer4
position:

relative;

z-index: 6;



div.layer1
position: relative; z-index: 5;


























































































Слайд 38 div::before { content: "";
}

div::after { content: "";
}
Псевдоэлементы

div::before { content:

Слайд 39
Псевдоэлементы

Псевдоэлементы

Слайд 40 ::before или :before?
В стандарте псевдоэлементы используют ::,
псевдоклассы :

::before или :before?В стандарте псевдоэлементы используют ::,псевдоклассы :

Слайд 41
Растровые спрайты

Растровые спрайты

Слайд 42
Растровые спрайты


Растровые спрайты

Слайд 43
Растровые спрайты


Растровые спрайты

Слайд 44 Нормализация стилей
Если хочется нормализовать стили, то можно использовать
normalize.css.
http://necolas.github.io/normalize.css/

Нормализация стилейЕсли хочется нормализовать стили, то можно использоватьnormalize.css.http://necolas.github.io/normalize.css/

Слайд 45 Подключение normalize.css

Подключение normalize.css

Слайд 46 Текстовая «Барбершопа» без стилей




Текстовая «Барбершопа» без стилей

Слайд 47 Текстовая с нормализацией




Текстовая с нормализацией
  • Имя файла: pozitsionirovanie-dekorativnye-elementy.pptx
  • Количество просмотров: 104
  • Количество скачиваний: 0
- Предыдущая Аутплейсмент. Анализ причин оптимизации персонала
Следующая - L’oreal enhanced ecommerce guidelines april 22th 2016

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

chego ne hvataet chego ne hvataet 99
Презентация. презентация к уроку (старшая группа) Презентация. презентация к уроку (старшая группа) 125
Зелена хімія Зелена хімія 138
ДОСААФ России ДОСААФ России 218
АКТУАЛЬНЫЕ АСПЕКТЫ профилактики туберкулеза.Организация эпидемиологического надзора АКТУАЛЬНЫЕ АСПЕКТЫ профилактики туберкулеза.Организация эпидемиологического надзора 166
Электронные услуги или как записаться в детский сад? презентация к уроку ( группа) по теме Электронные услуги или как записаться в детский сад? презентация к уроку ( группа) по теме 118
Презентация к уроку развития устной речи на основе изучения предметов и явлений окружающей действительности по теме Домашние птицы. Курица. 3 класс. презентация к уроку (3 класс) по теме Презентация к уроку развития устной речи на основе изучения предметов и явлений окружающей действительности по теме Домашние птицы. Курица. 3 класс. презентация к уроку (3 класс) по теме 157
Environmental problems Environmental problems 135
Отчет за межаттестационный период методическая разработка Отчет за межаттестационный период методическая разработка 131
Atl (above-the-line) btl (below-the-line) Atl (above-the-line) btl (below-the-line) 151
Интерактивные средства обучения Интерактивные средства обучения 290
презентация презентация 158
Ах, уж эта школьная форма Ах, уж эта школьная форма 169
Презентация Слова, отвечающие на вопросы КТО? и ЧТО? презентация к уроку (1 класс) Презентация Слова, отвечающие на вопросы КТО? и ЧТО? презентация к уроку (1 класс) 184
Состав поездов Состав поездов 129
Приобщение родителей к здоровому образу жизни и знакомство с современными здоровьесберегающими технологиями статья (младшая,средняя,старшая группа) Приобщение родителей к здоровому образу жизни и знакомство с современными здоровьесберегающими технологиями статья (младшая,средняя,старшая группа) 125
мультвикторина презентация к уроку мультвикторина презентация к уроку 174
ПДД для малышей материал по теме ПДД для малышей материал по теме 164
Использование сказкотерапии в работе с детьми дошкольного возраста. презентация к уроку Использование сказкотерапии в работе с детьми дошкольного возраста. презентация к уроку 145
veselaya osen ch 3 veselaya osen ch 3 105
p 5 p 5 128
Вам, родители маленьких пешеходов! презентация к уроку (1 класс) Вам, родители маленьких пешеходов! презентация к уроку (1 класс) 128
ОПУХОЛЕВЫЙ РОСТ( ОПУХОЛЕВЫЙ РОСТ( 195
СРСТема: Современные методы диагностики заболеваний ВНЧС СРСТема: Современные методы диагностики заболеваний ВНЧС 129
Формирование познавательных УУД у обучающихся начальной школы. Формирование познавательных УУД у обучающихся начальной школы. 158
Тема 2. Источники гражданского процессуального права Тема 2. Источники гражданского процессуального права 190
moy kamyshin moy kamyshin 133
Berlin Berlin 119
Машины или мотоциклы Машины или мотоциклы 129
Родительское собрание во 2 классе: Первая оценка, как к ней относиться? Домашнее задание. Советы родителям презентация урока для интерактивной доски (2 класс) Родительское собрание во 2 классе: Первая оценка, как к ней относиться? Домашнее задание. Советы родителям презентация урока для интерактивной доски (2 класс) 159