🗊Презентация ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Категория: Образование
Нажмите для полного просмотра!
– / 5
Скачать
Вы можете ознакомиться и скачать презентацию на тему ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ. Доклад-сообщение содержит 5 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ
Описание слайда:
ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Слайд 2


Блочная модель Web-страницы Все HTML-элементы формируют блок, у которого есть поля margin, границы border и отступы padding. Такие блоки могут быть отдельными блоками – блочного уровня (<body>, <div>, <p>, …) и строчными блоками – внутри строки текста (<span>, <a>, <img>, …). Блочная модель позволяет позиционировать размещение HTML-элементов на странице произвольным образом. Поля блока могут быть заданы с использованием как положительных так и отрицательных значений. Границы блока могут стилизовать рамки вокруг блока сложным образом. Отступы позволяют добавить в блок необходимые сдвиги относительно других элементов страницы
Описание слайда:
Блочная модель Web-страницы Все HTML-элементы формируют блок, у которого есть поля margin, границы border и отступы padding. Такие блоки могут быть отдельными блоками – блочного уровня (<body>, <div>, <p>, …) и строчными блоками – внутри строки текста (<span>, <a>, <img>, …). Блочная модель позволяет позиционировать размещение HTML-элементов на странице произвольным образом. Поля блока могут быть заданы с использованием как положительных так и отрицательных значений. Границы блока могут стилизовать рамки вокруг блока сложным образом. Отступы позволяют добавить в блок необходимые сдвиги относительно других элементов страницы

Слайд 3


Позиционирование на Web-странице Позиционирование – ядро языка CSS, предоставляет неограниченные возможности по управлению внешним видом Web-страницы. Для позиционирования используются CSS-стили для блоков информации и перемещение этих блоков относительно документа или окна браузера (для создания позиционируемого блока обычно используется дескриптор <div>). В CSS выделяются понятия: Нормальный поток – нестилизованное позиционирование содержимого страницы в браузере Блок-контейнер – родительский блок для элемента, который необходимо позиционировать Окно просмотра браузера – окно браузера, в котором отображается содержимое документа
Описание слайда:
Позиционирование на Web-странице Позиционирование – ядро языка CSS, предоставляет неограниченные возможности по управлению внешним видом Web-страницы. Для позиционирования используются CSS-стили для блоков информации и перемещение этих блоков относительно документа или окна браузера (для создания позиционируемого блока обычно используется дескриптор <div>). В CSS выделяются понятия: Нормальный поток – нестилизованное позиционирование содержимого страницы в браузере Блок-контейнер – родительский блок для элемента, который необходимо позиционировать Окно просмотра браузера – окно браузера, в котором отображается содержимое документа

Слайд 4


Типы позиционирования Абсолютное absolute – относительно корневого элемента <body> или относительно блока-контейнера <div>: {position: absolute; left: 10px; top: 50px; border: 2px solid red;} Относительное relative – относительно нормального потока, когда нет другого позиционирования. Статическое static – позиционирование в нормальном потоке (аналогично относительному). Фиксированное fixed – позволяет закрепить блок в любом месте страницы, фиксируется относительно окна просмотра при прокрутке: {position: fixed; left: 0px; top: 0px; background: red;}
Описание слайда:
Типы позиционирования Абсолютное absolute – относительно корневого элемента <body> или относительно блока-контейнера <div>: {position: absolute; left: 10px; top: 50px; border: 2px solid red;} Относительное relative – относительно нормального потока, когда нет другого позиционирования. Статическое static – позиционирование в нормальном потоке (аналогично относительному). Фиксированное fixed – позволяет закрепить блок в любом месте страницы, фиксируется относительно окна просмотра при прокрутке: {position: fixed; left: 0px; top: 0px; background: red;}

Слайд 5


Плавающее позиционирование Плавающее float используется для позиционирования элементов относительно других блоков справа – right или слева – left с обтеканием текстом соответственно слева или справа: {float: right; border: 1px double green; padding: 20px} Очищенное плавающее clear используется для отдельного размещения плавающего элемента без обтекания текстом (справа – right, слева – left, с обоих сторон – both): {float: right; clear: left;} Z-индекс позволяет накладывать элементы друг на друга, задает 3-ю ось в пространстве Web-страницы – чем больше значение z-индекса, тем выше размещен блок на странице: #blok1 {position: fixed; left: 0px; top: 0px; z-index: 2;} #blok2 {position: fixed; left: 20px; top: 50px; z-index: 1;}
Описание слайда:
Плавающее позиционирование Плавающее float используется для позиционирования элементов относительно других блоков справа – right или слева – left с обтеканием текстом соответственно слева или справа: {float: right; border: 1px double green; padding: 20px} Очищенное плавающее clear используется для отдельного размещения плавающего элемента без обтекания текстом (справа – right, слева – left, с обоих сторон – both): {float: right; clear: left;} Z-индекс позволяет накладывать элементы друг на друга, задает 3-ю ось в пространстве Web-страницы – чем больше значение z-индекса, тем выше размещен блок на странице: #blok1 {position: fixed; left: 0px; top: 0px; z-index: 2;} #blok2 {position: fixed; left: 20px; top: 50px; z-index: 1;}

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию